图片未加载前自动撑开元素高度

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

# 利用伪元素设置该元素的高度

.wrapper
  overflow hidden
  width 100%
  &:after
    content: "";
    display: block;
    padding-bottom: 50%;

1
2
3
4
5
6
7

padding-bottom 的取值是图片的高宽比（即，高/宽），它会根据 width值的50%计算，配合懒加载效果，图片加载完毕后给伪元素padding-bottom 的值设置为 0，这样就可以看到图片的高度了。

.wrapper
  width 100%
  height 26.66vw

1
2
3

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

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

更多 CSS单位 (opens new window)。

.wrapper
  width 100%
  aspect-ratio 4/3

1
2
3

aspect-ratio 设置宽高比

上次更新: 2023/03/08, 02:53:55