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

最新推荐文章于 2025-08-10 16:30:00 发布

原创最新推荐文章于 2025-08-10 16:30:00 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

在这里插入图片描述

我们给图片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>