[解決済み] CSSで画像をリサイズ、トリミングして表示する

質問

URLから取得した画像を、縦横の比率が違っても表示させたい。 そこで、比率を維持したままリサイズして、必要なサイズに画像を切り出したいのです。

htmlでリサイズができる img プロパティで、カットすることができます。 background-image .
どうしたら両方できるようになりますか？

例

この画像

サイズを持つ 800x600 の画像のように表示したい。 200x100 ピクセル

と img 画像のサイズを変更することができます 200x150px :

<img 
    style="width: 200px; height: 150px;" 
    src="http://i.stack.imgur.com/wPh0S.jpg">

そうすると、こうなります。

<img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg">

そして background-image 画像を切り取ることができます 200x100 ピクセルになります。

<div 
    style="background-image:
           url('https://i.stack.imgur.com/wPh0S.jpg'); 
    width:200px; 
    height:100px; 
    background-position:center;">&nbsp;</div>

与える。

    <div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;">&nbsp;</div>

どうすれば両立できるのですか？
画像のサイズを変更してから、好きなサイズにカットする？

解決方法は？

両方の方法を組み合わせて使用することができます。

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

    <div class="crop">
        <img src="https://i.stack.imgur.com/wPh0S.jpg" alt="Donald Duck">
    </div>

ネガを使用することができます。 margin の中で画像を移動させることができます。 <div/> .