CSS百分比padding与图片等比例布局实例页面

效果：

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

代码：

CSS代码：

.box {
    overflow: hidden;
}
.list {
    width: calc(25% - 1.5rem / 4);
    float: left;
    margin-bottom: .5rem;
}
.list:not(:nth-child(4n + 1)) {
    margin-left: .5rem;    
}
.cover {
    padding: 100% 100% 0 0;
    position: relative;
}
.cover img {
    position: absolute;    
    left: 0; top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

HTML代码：

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