CSS容器单位cqw与图片等比例布局实例页面
回到相关文章 »效果:
![](http://image.zhangxinxu.com/image/study/s/hanyun.jpg)
![](http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg)
![](http://image.zhangxinxu.com/image/study/s/s512/mm2.jpg)
![](http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg)
![](http://image.zhangxinxu.com/image/study/s/s512/mm4.jpg)
![](http://image.zhangxinxu.com/image/study/s/s512/mm5.jpg)
//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>