您的位置:首页 > Web前端 > CSS

css防止加载图片时下方div发生抖动

2019-05-13 10:38 2947 查看

问题:当用户网速慢或网络不通畅时图片加载前后下方的元素会发生抖动(位移)如下图所示

我们给图片img套个id为wrapper的div标签并设置他的样式

<body>
<div id="app">
<div id="wrapper"><!-- 新增的wrapper标签 -->
<img src="./timg.jpg" alt="" id="img">
</div>
</div>
<div>
<p>text</p>
</div>
</body>
<style type="text/css">
#app{
width:240px;
}
#wrapper{
overflow:hidden;
height:0;
padding-bottom:66.67%;
/* padding-bottom的值为图片的height/width的值 */
/* 此图尺寸为240*160故padding-bottom为160/240=66.67% */
}/* 新增的css样式 */
#img{
width:100%;
}
</style>

加了这三行css代码表示给即将加载的图片预留了位置并用padding-bottom填充

再次刷新页面问题解决!

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: