1)前言
许多时候前端展示图片宽度可能是随着父级元素的宽度来定的，也就是width 100%，那么怎么高度怎么设计呢
例如
image.png
我们要做到这种布局，蓝色方块为li 考虑两个两个并排显示图片必须正方形展示 考虑到屏幕的大小问题，li就不能是固定宽度了
<body>
<ul>
<li>
<div class="img-wapper">
<img src="****" />
</div>
<div class="text>详细说明</div>
</li>
<li>
<div class="img-wapper">
<img src="****" />
</div>
<div class="text>详细说明</div>
</li><li>
<div class="img-wapper">
<img src="****" />
</div>
<div class="text>详细说明</div>
</li><li>
<div class="img-wapper">
<img src="****" />
</div>
<div class="text>详细说明</div>
</li>
...
</ul>
</body>
//css代码
ul{
display : flex;
flex-wrap: wrap;
}
li{
width: 50%;
overflow: hidden;
}
.img-wapper{
position: relative;
padding-top: 100%; //重要的就是这个padding-top: 100%
}
img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
重点是img的容器需要定位并且padding-top： 100%；
