CSS aspect-ratio与图片等比例布局实例页面

回到相关文章 »

效果：

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

代码：

CSS代码：

.box {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.list {
    flex-basis: calc(25% - 1.5rem / 4);
    aspect-ratio: 1 / 1;
}
.list img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

HTML代码：

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