<div class="box"> <img src="/img.jpg"> 。AtelierRoi"> <div class="box"> <img src="/img.jpg"> " />
アトリエロワ

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

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;
}

HOME > html+css > レスポンシブで画像を正方形に維持する

html+css

html+css

+ More