【object-fit】コンテナにはめ込むレイアウト指示
imgやvideoの中身をコンテナにはめ込む指示
object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;
初期値
fill
contain
アスペクト比を維持したまま、要素のコンテンツボックスに収まるように拡大縮小される。オブジェクト全体がボックス内に表示され、アスペクト比が維持される。
cover
アスペクト比を維持したまま、全体を埋めるように拡大縮小。合わない場合は、オブジェクトの方が合うように切り取られる。
fill
(初期値)
オブジェクト全体が完全にボックスの中を埋めます。オブジェクトが合うように引き伸ばされる。
none
拡大縮小されない。
scale-down
コンテンツは none または contain を指定したかのようにサイズが決められ、サイズが小さいほうを採用。
ディスカッション
コメント一覧
まだ、コメントがありません