固定縦横比のまま画像を中央配置するのに便利。
object-fit – CSS: カスケーディングスタイルシート | MDN
/*
* figure等の画像をwrapする要素
* aspect-ratio で比率を固定するのが楽
*/
.hoge {
aspect-ratio: 16 / 9;
}
/*
* 画像のwidth, height は必ず指定する
*/
.hoge img {
width: 100%;
height: 100%;
object-fit: contain;
}
flexボックスより視覚的にわかりやすいのでIEが消えた現状だとobject-fitで実装するのは個人的にはあり。