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

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

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

.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)。