移动端常见自适应图片加载时页面塌陷问题解决方案

自适应图片加载时页面塌陷问题解决方案"/>

移动端常见自适应图片加载时页面塌陷问题解决方案

<style>
.box{
width:100%;
height:0;
overflow:hidden;
padding-bottom:24.6%;
}
img{
width:100%;
}
</style><div class="box"><img src=".png">
</div>

方法1：重点在于图片是100%自适应时，需要包裹一个盒子，并且这个盒子需要添加width:100%;height:0;overflow:hidden;padding-bottom:24.6%;属性。 其中padding-bottom的值就是图片本身的高/宽比例。 因为padding本身百分比写法就是继承的父级的宽度去算的。而heignt的百分比是继承自父元素的高度，是不确定的，所以使用height不合适。

方   法 2：

<style>
.box{
width: 100%;
height: 24.6vw
}
img{
width:100%;
}
</style>

• vw：视窗宽度的百分比（1vw 代表视窗的宽度为 1%）
• vh：视窗高度的百分比

vw、vh 优势在于能够直接获取高度，而用 % 在没有设置 body 高度的情况下，是无法正确获得可视区域的高度的，所以这是挺不错的优势。

但是第二种方法兼容性有一定问题。所以推荐第一种方法，这样可以保证在图片未加载完成的时候，页面布局不乱。