background-size: cover 在 bootstrap col 中不生效是因为 col 缺乏明确高度，导致背景图无法按比例缩放；需通过 padding-top 百分比技巧（如 56.25% 实现 16:9）配合绝对定位伪元素承载背景图来解决。
为什么 background-size: cover 在 Bootstrap col 里不生效？
因为 Bootstrap 的 col 默认没有固定高，而 background-size: cover 依赖容器有明确的宽高比或高度。如果只设了宽度（比如 col-6），高度塌陷，背景图就“看不见”或拉伸变形。
用 padding-top 百分比技巧锁定宽高比
这是最稳妥、兼容性好、不依赖 JS 的方案，核心是利用父容器内边距百分比基于宽度计算的特性来撑开高度。
- 给包裹图片的
div加类（比如bg-img），移除默认 padding/margin - 设置
position: relative，再用伪元素或子元素承载背景图 - 关键：用
padding-top: 56.25%（16:9）或padding-top: 100%（1:1）模拟等比高度 - 内部绝对定位的元素（如
::before）设background-image+background-size: cover
.bg-img {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
overflow: hidden;
}
.bg-img::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image: url('photo.jpg');
background-size: cover;
background-position: center;
}
Bootstrap 5+ 可直接用 ratio 工具类（但注意限制）
ratio 类本质也是 padding-top 技巧的封装，用起来快，但只适用于单个子元素且该子元素必须是 img 或支持 object-fit 的媒体元素——它不支持背景图。
- 若你坚持用
<img>标签：用<div class="ratio ratio-16x9"><img src="..." class="w-100 h-100 object-fit-cover"></div> -
object-fit: cover是关键，它让img自身实现等比裁切覆盖 - 不能和
background-image混用；ratio容器对子元素数量敏感，多一个元素就失效
别踩这些坑
实际调试中最常卡住的几个点：
-
col必须嵌套在row中，否则padding和flex行为异常 - 如果用了
background-image，确保路径正确且资源可访问——404 时表现和“没生效”一模一样 - 移动端缩放下，
background-position: center可能裁掉关键内容，必要时改用background-position: 10% 20%手动微调 - IE 不支持
object-fit，若需兼容，只能退回padding-top+ 伪元素方案
真正麻烦的不是写几行 CSS，而是判断当前场景该用 img 还是 background-image——前者语义清晰、SEO 友好；后者可控性强、适合装饰性图层。选错方向，后面所有适配都白搭。
