「布局技巧」图片未加载前自动撑开元素高度

# 「布局技巧」图片未加载前自动撑开元素高度

在移动端开发中,有一些元素是根据图片高度来自动撑开的 ,高度不能写死(如轮播图的外层元素)。在网络较慢的情况下,图片加载需要一些时间,此时该元素的高度没有被撑开,在网页布局上会有一些不想看到的效果。 这种情况我们可以设置如下样式来设置该元素的高度:

.wrapper
  overflow hidden
  width 100%
  height 0
  padding-bottom 26.66% // 这个数值是图片的高宽比,即 高/宽
  background #eee
1
2
3
4
5
6

上面代码中,padding-bottom 的取值是图片的高宽比(即,高/宽),它会根据 width值的26.66%计算,最终元素的高度会和图片加载完成后的高度一致。

也可以使用vw的方法,但在一些浏览器可能有兼容性问题:

.wrapper
  width 100%
  height 26.66vw
  background #eee
1
2
3
4

vw,viewpoint width,视窗宽度,1vw=视窗宽度的1%

vh,viewpoint height,视窗高度,1vh=视窗高度的1%

更多 CSS单位 (opens new window)

上次更新: 2024/02/03, 21:12:03