「布局技巧」图片未加载前自动撑开元素高度
# 「布局技巧」图片未加载前自动撑开元素高度
在移动端开发中,有一些元素是根据图片高度来自动撑开的 ,高度不能写死(如轮播图的外层元素)。在网络较慢的情况下,图片加载需要一些时间,此时该元素的高度没有被撑开,在网页布局上会有一些不想看到的效果。 这种情况我们可以设置如下样式来设置该元素的高度:
.wrapper
overflow hidden
width 100%
height 0
padding-bottom 26.66% // 这个数值是图片的高宽比,即 高/宽
background #eee
1
2
3
4
5
6
2
3
4
5
6
上面代码中,padding-bottom
的取值是图片的高宽比(即,高/宽),它会根据 width
值的26.66%
计算,最终元素的高度会和图片加载完成后的高度一致。
也可以使用vw
的方法,但在一些浏览器可能有兼容性问题:
.wrapper
width 100%
height 26.66vw
background #eee
1
2
3
4
2
3
4
vw
,viewpoint width,视窗宽度,1vw=视窗宽度的1%
vh
,viewpoint height,视窗高度,1vh=视窗高度的1%
在GitHub上编辑 (opens new window)
上次更新: 2/23/2022, 5:36:03 PM