思路：
外层div高度为0
设置relative
padding-top代替高度
image.png
image.png
加上 display: block;是因为a标签是行级标签
.im a {
width: 100%;
height: 0;
position: relative;
padding-top: 100%;
display: block;
}
.im a img {
position: absolute;
top: 0;
width: 100%;
height: 100%;
left: 0;
}
同样做法:图片大小不一致导致布错乱
image.png
html：
<li class="col-sm-3 products_views" id="13333">
<div class="diy-products_list">
<a title="图片.png" href="链接">
<picture class="als-content-results-item__pic">
<img src="图片.png" id="magic_13333" class="lzay img-responsive" data-original="图片.png" alt="" title="">
</picture>
</a>
</div>
<div class="themeText">图片.png</div>
</li>
css:
.diy-products_list a {
display: block;
background: #f2f2f2;
}
.als-content-results-item__pic {
display: block;
height: 0;
padding-bottom: 100%;/*重点*/
overflow: hidden;/*超出部分隐藏--重点*/
}
.img-responsive{
display: block;
max-width: 100%;
height: auto;
}
