CSS容器单位cqw与图片等比例布局实例页面

回到相关文章 »

效果：

//zxx: 拖动右侧的小三角可以改变容器宽度

代码：

CSS代码：

.box {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    container-type: inline-size;
}
.box img {
    width: calc(25cqw - 1.5rem / 4);
    height: calc(25cqw - 1.5rem / 4);
    object-fit: cover;
}

HTML代码：

<ul class="box">
    <img src="0.jpg" />
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
    <img src="4.jpg" />
    <img src="5.jpg" />
</ul>