menu

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

2023年6月22日

Code

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;にすることで、画像が正方形のサイズに収まるように調整しています。

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

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

Follow Me!

Aji ろぐろぐみー筆者

フリーのWeb屋
詳しいプロフィールはこのページで色々書いてます。Twitterもやってます。コメント頂けると陸に上がった魚のようにピチピチ喜びます!

関連記事

コメントはこちらからどうぞ

プライバシーポリシーはこちら
また、コメントはこちらで承認の作業を行うまでは表示されません。ご了承ください。

CAPTCHA