CSS

The CSS `object-fit` property specifies how an image or video fits within its container element, such as whether it preserves its aspect ratio or not.

object-fit

　CSSの object-fitプロパティは、要素内に画像やビデオなどのコンテンツをどのようにフィットさせるかを制御するために使用されます。このプロパティは、主に <img>タグや <video>タグで使われ、コンテンツが要素のサイズに対してどのように表示されるかを指定できます。

fill

デフォルト値で、コンテンツが要素の縦横比を無視して、完全に要素を埋めます。

contain

コンテンツの縦横比を保持したまま、要素の中に収まるように調整します。余白ができる場合があります。

cover

コンテンツの縦横比を保持しつつ、要素全体を埋めるように表示します。コンテンツが一部切り取られる場合があります。

none

コンテンツは元のサイズのままで表示され、サイズが変更されません。

scale-down

noneと containの両方を適用し、コンテンツを小さくする場合にのみ縮小します。

Sample

img {
	object-fit: cover;
}

　この例では、画像が要素を縦横比を保ちながら埋めるように表示されますが、要素のサイズを超える部分は切り取られる可能性があります。