1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > html width百分比高度与宽度相等 css解决设置宽度百分比 高度跟宽度相等 防止内部

html width百分比高度与宽度相等 css解决设置宽度百分比 高度跟宽度相等 防止内部

时间:2020-01-08 21:05:14

相关推荐

html width百分比高度与宽度相等 css解决设置宽度百分比 高度跟宽度相等 防止内部

1、前提:我的图片宽高比是1:1,在图片外层div高度未设置时(即使设置高度为100%,默认为内容的高度),运行程序会出现图片抖动的现象,代码如下:

*{padding:0; margin:0;}

.box{width:100%; font-size:0;}

.box img{width:100%; height:100%; }

.con{width:100%; height:600px; background-color:#ff0;}

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。