aspect-ratio
アスペクト比を指定する
aspect-ratio: <width> / <height>
mdn
<img>の親要素に指定することが多い
aspect-ratioの登場以前はpadding-top: 100%のような指定をしていた ref
code:css
.image-wrapper {
width: 100%;
aspect-ratio: 16 / 9;
}
.image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
}
CSS aspect-ratioプロパティの使い方、レスポンシブやレイアウトシフトで大活躍 | コリス