【CSS】縦横比を保ったままレスポンシブで画像を正方形にする。

2023年6月22日

2023年11月15日

CSSで画像のアスペクト比を保ちつつ常に正方形に保つ方法はです。

まず、HTMLの構造は以下のようになります。

<div class="box-container">
    <div class="box">
        <img src="/img.jpg">
    </div>
    <div class="box">
        <img src="/img.jpg">
    </div>
    <div class="box">
        <img src="/img.jpg">
    </div>
</div>

.box-container{
    display: flex;
    justify-content: space-between;
}
.box{
    width: 30%;
    background: #eee;
    position: relative;
    overflow: hidden;
}
.box::before{
    content: "";
    padding-top: 100%;
    display: block;
}
.box img{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
}

この例では、.box-containerクラスを持つ要素（親要素）がflexboxとして設定され、その子要素である.boxクラスを持つ要素が横並びに配置されます。

そして、.boxの疑似要素を作成しpadding-top: 100%;にすることで.box要素を正方形に。

また、.box imgをposition: absolute;にすることで、画像が正方形の.box要素の中に収まるようにしてます。

そして、.box imgはwidth: 100%; height: 100%;の範囲でobject-fit: cover;にすることで、画像が正方形のサイズに収まるように調整しています。

以上が、レスポンシブデザインで画像を常に正方形に保つ方法です。

この方法を用いることで、画像のアスペクト比を保ちつつ、レスポンシブデザインを適用することが可能となります。