CSS 正方形のレスポンシブ整形

2020-04-02

近年、正方形の要素を並べたサイトなどがよく見られるようになりましたが、今回はCSSで正方形を整形し、さらに、レスポンシブ対応する方法をご紹介したいと思います。

通常の正方形であれば、widthとheightのサイズを指定すれば、それで完成ですが、それではレスポンシブとはいえません。
また、シンプルな構成で整形できるように、今回は擬似要素:beforeを使用していきます。

.sample{
    position: relative;
    width: 50%;
    max-width: 300px;
    margin: 0 auto 30px;
    background: #eee;
}
.sample:before{
    content: '';
    display: block;
    width: 100%;
    padding-top: 100%;
}

.sample{

position: relative;

width: 50%;

max-width: 300px;

margin: 0 auto 30px;

background: #eee;

}

.sample:before{

content: '';

display: block;

width: 100%;

padding-top: 100%;

}

画像を配置

imgタグを配置して、応用編として、記載しておきます。

.sample{ overflow: hidden;  /* 上記のCSSに追記 */}
.sample img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:100%;
    height: auto;
}

.sample{ overflow: hidden; /* 上記のCSSに追記 */}

.sample img {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

width:100%;

height: auto;

}

様々な比率の形に応用

正方形の他にも、サイトによっては、４：３や16：９などの比率にしたい場合もあるかと思います。その場合は、padding-topの指定を下記のように変更していきます。

2:1の場合

2:1

.sample-2x1:before{
    content: '';
    display: block;
    width: 100%;
    padding-top: 50%;
}

.sample-2x1:before{

content: '';

display: block;

width: 100%;

padding-top: 50%;

}

4:3の場合

4:3

.sample-4x3:before{
    content: '';
    display: block;
    width: 100%;
    padding-top: 75%;
}

.sample-4x3:before{

content: '';

display: block;

width: 100%;

padding-top: 75%;

}

16:9の場合

16:9

.sample-16x9:before{
    content: '';
    display: block;
    width: 100%;
    padding-top: 56.25%;
}

.sample-16x9:before{

content: '';

display: block;

width: 100%;

padding-top: 56.25%;

}

というように、{padding-top}の%の数値を変更することで、レスポンシブへ対応することができますので、ご参考までに。