巧用 CSS 伪元素，让背景图自适应保持比例

在前端页面开发中，经常会遇到需要背景图自适应容器且保持原始比例的需求。今天分享一个实用技巧，利用 CSS 伪元素结合 padding-top 来实现，以 .section 为例详细说明。

一、需求场景与初始设置

（一）基础布局

.section 容器需要设置背景图，要求宽度铺满（width: 100% ），高度根据背景图原始比例自适应，同时背景图顶部居中对齐（background-position: top center ），并且要隐藏溢出内容（overflow: hidden ），初始结构如下：

css

css 复制代码

.section {
  position: relative;
  width: 100%; 
  background-image: url(./bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto; 
  background-position: top center; 
  overflow: hidden;
}

这里移除了固定高度，因为要让高度随背景图比例动态变化。

二、关键实现：伪元素维持比例

（一）原理说明

利用伪元素 ::before 的 padding-top 属性来维持比例。padding-top 的百分比值是相对于父元素宽度计算的，通过 （图片原始高度 ÷ 图片原始宽度）× 100% 这个公式，就能让伪元素的高度和背景图原始比例对应，进而撑起父容器 .section 的高度，让背景图完整且按比例展示。

（二）代码实现

css

css 复制代码

.section::before {
  content: "";
  display: block;
  /* 计算方式：(图片原始高度 ÷ 图片原始宽度) × 100%
     示例中图片 1920px(宽) × 2863px(高)，则 2863 ÷ 1920 × 100% ≈ 149.11% */
  padding-top: 149.11%; 
}

比如示例里背景图实际尺寸是 1920px（宽）× 2863px（高） ，代入公式计算得到 padding-top 的值约为 149.11% ，替换为你项目中背景图的实际比例值即可。这样设置后，.section 容器的高度就会根据宽度和背景图比例自动调整，背景图也能完美适配，不会出现拉伸变形导致比例失调的问题。

三、完整代码整合

把上述代码整合起来，完整的 CSS 样式如下：

css

css 复制代码

.section {
  position: relative;
  width: 100%; 
  background-image: url(./bg.png);
  background-repeat: no-repeat;
  background-size: 100% auto; 
  background-position: top center; 
  overflow: hidden;
}

.section::before {
  content: "";
  display: block;
  padding-top: 149.11%; 
}

通过这种方式，就能轻松实现背景图自适应容器且保持原始比例的效果，在处理 banner 图、产品介绍模块等需要背景图比例精准控制的场景中非常实用，让页面布局更灵活、美观，快去试试吧！