☰

CSS 画像のサイズを変更して切り取った画像を表示する 質問する

tag-icon • tag-icon html css background-image image
CSS 画像のサイズを変更して切り取った画像を表示する 質問する

URL からの画像は、サイズ比率が異なっていても、特定の幅と高さで表示したいです。そのため、サイズを変更し (比率を維持)、画像を必要なサイズにカットしたいと思います。

htmlimgプロパティを使用してサイズを変更し、 を使用して切り取ることができますbackground-image。
両方を行うにはどうすればよいですか?

例：

この画像：

ここに画像の説明を入力してください


サイズはピクセルで、ピクセル800x600の画像のように表示したい200x100


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

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


つまり、次のようになります。

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


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

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

以下が得られます:

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


どうすれば両方できますか?
画像のサイズを変更してから、希望のサイズにカットできますか?

ベストアンサー1

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

    .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.sstatic.net/wPh0S.jpg" alt="Donald Duck">
    </div>

ネガティブを使用してmargin、 内で画像を移動できます<div/>。

おすすめ記事