レスポンシブで画像を正方形に維持する

HTML

<div class="cont">
    <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

.cont{
    display: flex;
    gap: 5%
    justify-content: space-between;
}
.box{
    background: #000000;
    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;
}

« before・afterをcssで画像にする

【CSS】テキスト2行目以降を字下げ（インデント） »

2025/04/05更新