CSSでレスポンシブで可変な正方形を実装する方法

投稿日：2021/10/11 ｜最終更新：2021/10/17
CSS・Sass

CSSでレスポンシブな正方形を実装するには、コンテナーの疑似要素にpadding-topを設定します。

基本的なレスポンシブで可変な正方形

プレビュー

画面の横幅を変更すると上記３つの正方形が可変になると思います。

html例

<div class="box-container">
    <div class="box">
    </div>
    <div class="box">
    </div>
    <div class="box">
    </div>
</div>

css例

.box-container{
    display: flex;
    justify-content: space-between;
}
.box{
    width: 30%;
    background: #eee;
}
.box::before{
    content: "";
    padding-top: 100%;
    display: block;
}

.boxというアイテムの疑似要素を作成し、padding-top: 100%; にすることでアイテムを正方形にしています。

中に文章が入っている場合のレスポンシブで可変な正方形

プレビュー

サンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルです

画面の横幅を変更すると上記３つの正方形が可変になると思います。

html例

<div class="box-container">
    <div class="box">
        <p>サンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルです</p>
    </div>
    <div class="box">
        <p>サンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルです</p>
    </div>
    <div class="box">
        <p>サンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルですサンプルです</p>
    </div>
</div>

css例

.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 p{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    margin: 0;
}

.boxというアイテムの疑似要素を作成し、padding-top: 100%; にすることでアイテムを正方形にしています。
.box pをposition: absolute;にすることで正方形の中に文字列がおさまるようにしています。
.boxをoverflow: hidden;にすることで、正方形からはみ出る部分を非表示にしています。

中に画像が入っている場合のレスポンシブで可変な正方形

プレビュー

画面の横幅を変更すると上記３つの正方形が可変になると思います。

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>

css例

.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というアイテムの疑似要素を作成し、padding-top: 100%; にすることでアイテムを正方形にしています。
.box imgをposition: absolute;にすることで正方形の中に画像がおさまるようにしています。
.box imgはwidth: 100%; height: 100%;の範囲でobject-fit: cover;にすることで正方形のサイズにおさまるように調整しています。