web图片100%宽度自适应,高度不塌陷
一般在web端图片100%自适应,在页面加载的时候存在高度塌陷的问题
解决这个问题其实很简单,用padding-top设置百分比值来实现自适应,公式如下
padding-top = (Image Height / Image Width) * 100%
如:图片宽400px,高200px;套用上面公式计算出padding-top:值是50%;
HTML代码
<div class="cover"> <img src="images/test.jpg" alt=""/> </div> .cover{position: relative; padding-top:50%; height: 0; overflow: hidden;} .cover img{position: absolute; top: 0; width: 100%;}
喜欢这篇文章?欢迎打赏~~