CSS Padding-Top 实现自适应容器的宽高比例保持一致

在网页设计中，我们经常需要创建一个具有固定宽高比（如 16:9 或 9:16）的容器。然而，当屏幕大小发生变化时，如何让这个容器自适应调整，并且保持固定的宽高比呢？

通常，我们可能会用 JavaScript 来实现这一效果。具体来说，先将容器宽度设置为 100%，然后通过 JavaScript 获取容器的宽度（element.offsetWidth），再根据比例计算出对应的高度值。然而，这种方法需要监听窗口大小的变化，并频繁操作 DOM，对性能并不友好。

幸运的是，我们可以通过 CSS 的 padding-top 或 padding-bottom 属性来实现这一效果，无需使用 JavaScript。

固定比例的工作原理

• padding-top 的值是按百分比设置的，例如 padding-top: 56.25% 对应于 16:9 的比例。
• 由于百分比值是相对于容器的宽度计算的，这样可以确保当容器的宽度变化时，padding-top 会自动调整容器的高度，从而保持宽高比。

具体实现

以下是一个示例代码：

<div class="container">
  <div class="content"></div>
</div>

.container {
  position: relative;
  width: 100%;
  padding-top: calc(
    9 / 16 * 100%
  ); /* 16:9的比例。如果是9:16的比例，改为16 / 9 * 100% */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: burlywood; /* 测试显示用 */
}

在上面的代码中，我们给容器元素添加了 padding-top: calc(9 / 16 * 100%)，这样可以实现容器的高度根据宽高比例自动调整，而无需借助 JavaScript 设置高度。

理解 padding-top 如何影响高度

在标准盒模型下，padding-top 的值会增加容器的总高度，因为它会在内容的上方增加额外的空间。但这里我们利用了 padding-top 相对于容器宽度计算这一特性，创造了一种新的高度比例。

当我们在容器上设置 padding-top 时，这个 padding-top 是按照容器的宽度百分比计算的，因此当容器宽度变化时，这个 padding-top 也会相应变化，从而调整容器的总高度，以维持比例。

盒模型示例

在标准盒模型中：

<p class="p" id="container"></p>

.p {
  box-sizing: content-box;
  padding-top: 50px;
  height: 10px;
}

假设元素的高度为 10px，内边距为 50px：

• 标准盒模型 box-sizing: content-box：

  element = document.getElementById('container');
  element.style.height = '10px';
  element.offsetHeight = 60; // 10px 内容高度 + 50px 内边距

• 怪异盒模型 box-sizing: border-box：

  element = document.getElementById('container');
  element.style.height = '10px';
  element.offsetHeight = 50; // 高度包含内边距，实际内容高度减少

  element.offsetHeight = content + 垂直内边距 + border

padding-top 和 padding-bottom 的相同点

• 都是根据容器的宽度来计算。
• 都能用于实现宽高比固定的效果。

为什么常用 padding-top

• padding-top 通常用于从顶部开始的布局，这样内容可以从顶部开始定位。
• 视觉上更直观，特别是在内容从顶部开始流动的情况下。

容器占位，更好的用户体验

当加载图片时，未加载完成前会占位，防止后续内容被顶上去，提升用户体验。

<img
  src="https://img1.baidu.com/it/u=1571454416,119170533&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
  alt=""
/>
<div>被顶的文字</div>

在上面的代码中，当图片尚未加载到页面上时，<div>被顶的文字</div> 将出现在顶部位置。但是，当图片加载完成后，<div>被顶的文字</div> 将被顶到图片后面，这可能会给用户带来不良的视觉体验。

通过使用 padding-top 和 padding-bottom 技巧，我们可以确保容器的位置被保留，后续元素也不会被顶到。这将提升用户的使用体验。

<div class="container">
  <img
    class="content"
    src="https://img1.baidu.com/it/u=1571454416,119170533&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
    alt=""
  />
</div>
<div>不会被顶的文字</div>

通过这种方法，我们可以在不借助 JavaScript 的情况下，实现具有固定宽高比的自适应容器，简化代码并提升性能。希望这篇文章能帮助你更好地理解和应用 CSS 的 padding-top 和 padding-bottom 技巧。