CSS 图片加载提前占位 padding-top、padding-bottom

今天聊一个图片加载提前占位的一个问题 🤔，内容比较适合初学者。

起因

在响应式页面当中，图片加载之前是不知道图片高度的，加载成功图片完全撑开。如果不做提前占位会把下面的内容挤下去，页面出现抖动，就像下面效果一样：

假如图片是自适应的，宽度为屏幕宽度的30%，高度等比例缩放，这时候是无法直接设置图片高度的，所以就导致了图片未加载前高度为0，加载成功后撑开的问题。

解决这个问题就需要对图片进行提前占位，这里虽然不确定图片的高度，但是图片的比例是确定的。（要是图片的比例都不确定那就玩不了了😅……）

padding-top

所以有请今天的主角登场：padding-top或者padding-bottom

当padding-top的值设置为百分比的时候，让我们先看一下mdn官方是怎么解释的：

当内边距（padding）是一个百分比的时候，百分比是和包含块（containing block）的宽度有关的，同样一定不能为负数。

说白了就是padding-top的值如果是百分比，那么这个百分比是相对于其父容器的宽度的。

比如下面这个案例（案例写成了padding-bottom，效果都是一样的）：

.content{
  width: 300px; /* 也可以是百分比 */
  height: 500px;
  background-color: aquamarine;
}
.box{
  width: 100%;
  height: 0;
  padding-bottom: 50%; /* 相对于父级宽度，也就是150px */
  background-color: red;
}

<div class="content">
  <div class="box">div>
div>

.box中padding-bottom的50%是相对于父容器.content的宽度决定的，也就是150px。而且.content也不一定是准确的px值，也可以是相对于页面的百分比值，这就适用于响应式的百分比宽度。

所以我们可以用图片的宽高比作为padding-bottom的值提前把图片所要占用的空间撑开，然后img绝对定位在.content上面就可以达到提前占位的效果。

比如下面案例使用的图片宽高是300px * 450px，那么padding-bottom的值就可以设置为150%。

这里为了少写一个div，用伪类代替：

.content{
  position: relative;
  width: 300px;
  font-size: 0; /*  消除内联元素间的间隔(空格) */
}
.content::before{
  content: '';
  display: block;
  width: 100%;  /* 400px 相对于content的width */
  padding-bottom: 150%;  /* 200px 相对于content的width */
  background-color: red;
}
.content img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="content">
  <img src="https://img1.baidu.com/it/u=2348819965,1910380145&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750" alt="">
div>
<div>下方内容下方内容下方内容div>

可以看到在加载过程中下方内容没有从上面被挤下来，提升了用户体验。

大致思路就是这样，主要是使用padding-top或者padding-bottom的百分比用来实现占位效果 😃。