利用padding实现图片的自适应相等宽高（图片未加载完留出图片

思路：

外层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;
}