画像は固定サイズのdivで、画像は切り抜きで保持する

Question

私は固定サイズのdiv（たとえば300px x 300px）を持っていますが、divに異なるサイズの画像を表示したい場合はdivを完全に埋めて、未完成の長さの辺を切り取る。 元の画像が下の画像であり、予想されるdiv画像が上の画像です。

Answer 1

supporting IE (Edge should get support soon)について心配していない場合は、object-fit: coverは必要なものを正確に行う必要があります。それで、object-positionを使って、どのようにクロップされているのかを指定することができますが、多くの場合、デフォルトのcenter centerが望ましいでしょう。

object-fit - MDN

object-position - MDN

IEは（またはあなたが今エッジサポートを必要とする）問題でない場合は、背景画像を使用すると、あなたは基本的に同じことを行うことができますbackground-sizeとbackground-positionへのアクセスを取得します。

Answer 2

div.container{ 
 
     height: 300px; 
 
     width: 300px; 
 
     background-position: center center; 
 
     border: 1px solid #333; 
 
    }

<div class="container" style="background-image: url(https://thumb1.shutterstock.com/display_pic_with_logo/150592/150592,1233424894,3/stock-photo-beautiful-spring-flowers-24206422.jpg);"> 
 
</div> 
 
<br/> 
 
<img src="https://thumb1.shutterstock.com/display_pic_with_logo/150592/150592,1233424894,3/stock-photo-beautiful-spring-flowers-24206422.jpg"/>