本文介绍了一种在不设定图片外层div高度的情况下避免图片出现抖动现象的方法，通过设置外层div的高度与宽度相等并使用padding-top来实现。
1、前提：我的图片宽高比是1：1，在图片外层div高度未设置时（即使设置高度为100%，默认为内容的高度），运行程序会出现图片抖动的现象，代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="box">
<img src="img.jpg" />
</div>
<div class="con">
</div>
<style>
*{padding:0; margin:0;}
.box{width:100%; font-size:0;}
.box img{width:100%; height:100%; }
.con{width:100%; height:600px; background-color:#ff0;}
</style>
</body>
</html>2、方案：设置外层div的高度与宽度相等，让外层div主动撑开
其中的padding-top可以替换为padding-bottom，效果不变
子级脱离文档流后，子级的width/height为（设置了static以外定位的)父级width/height+padding
.box{width:100%; height:0;padding-top:100%;position:relative; }
.box img{width:100%; height:100%; position:absolute; top:0; left:0; }
扫一扫
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
