web图片100%宽度自适应,高度不塌陷

一般在web端图片100%自适应,在页面加载的时候存在高度塌陷的问题

解决这个问题其实很简单,用padding-top设置百分比值来实现自适应,公式如下

padding-top = (Image Height / Image Width) * 100%

如:图片宽400px,高200px;套用上面公式计算出padding-top:值是50%;

HTML代码

<div class="cover">
    <img src="data:images/test.jpg" alt=""/>
</div>

.cover{position: relative; padding-top:50%; height: 0; overflow: hidden;}
.cover img{position: absolute; top: 0; width: 100%;}