一般在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%;}


评论关闭
IT序号网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!