メインコンテンツまでスキップ

アスペクト比

IEのサポートが不要になり、aspect-ratioのプロパティが使えるようになりました。

下記の2つの例は双方とも正方形の画像を、16:4の比率で中央部分だけ切り抜いて表示しています。両方とも同じ見え方をしていますが実装方法は異なります。

Before

After

<div class="c-before">
    <img src="(...)" class="c-before__image">
</div>
.c-before {
    position: relative;
    padding-top: 56.25%;
}
.c-before__image {
    position: absolute;
    object-fit: cover;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}