在前端页面开发中,经常会遇到需要背景图自适应容器且保持原始比例的需求。今天分享一个实用技巧,利用 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 图、产品介绍模块等需要背景图比例精准控制的场景中非常实用,让页面布局更灵活、美观,快去试试吧!