css解决设置宽度百分比，高度跟宽度相等，防止内部图片抖动

来源：互联网发布：战舰世界亚利桑那数据编辑：程序博客网时间：2024/05/17 09:15

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; }

阅读全文

0 0