如何在Bootstrap 5中通过CSS实现响应式固定比例矩形？-css教程-PHP中文网

Bootstrap 5 的 ratio 类仅对块级容器生效，需用 div 包裹媒体元素并设 w-100 h-100，子元素须加 position-absolute 等定位类；响应式比例需手动写媒体查询覆盖 --bs-aspect-ratio 变量。

如何在bootstrap 5中通过css实现响应式固定比例矩形？

直接用 `ratio` 类就能固定比例，但只对块级容器生效

Bootstrap 5 的 ratio 工具类本质是给父容器设 aspect-ratio（现代浏览器）+ padding-bottom fallback（旧 Safari），它不作用于 <img alt="如何在Bootstrap 5中通过CSS实现响应式固定比例矩形？" >、<video></video> 或 <iframe></iframe> 自身，必须包一层 <div>。常见错误就是把 <code>ratio-16x9 直接加在 <video></video> 上——结果高度塌成一条线，或只显示左上角。

正确结构必须是：

<div class="ratio ratio-16x9">
  <video class="w-100 h-100"></video>
</div>

ratio 类提供 position: relative 和基础盒模型
ratio-16x9 类写死 --bs-aspect-ratio: 16/9，并 fallback 到 padding-bottom: 56.25%
子元素必须显式加 position-absolute top-0 start-0 w-100 h-100，否则内容会溢出或错位

想在不同断点换比例？得自己写媒体查询覆盖 `--bs-aspect-ratio`

Bootstrap 5 没提供 ratio-md-4x3 这类响应式比例类，所有内置类（如 ratio-1x1、ratio-21x9）都是全局生效的。如果你需要手机端 1:1、平板 4:3、桌面 16:9，就得手动补 CSS：

.my-ratio {
  --bs-aspect-ratio: 1/1;
}
@media (min-width: 768px) {
  .my-ratio {
    --bs-aspect-ratio: 4/3;
  }
}
@media (min-width: 992px) {
  .my-ratio {
    --bs-aspect-ratio: 16/9;
  }
}

变量值必须是 a/b 格式，不能有空格，16 / 9 无效，16/9 才有效
旧版 Safari（aspect-ratio，此时 fallback 的 padding-bottom 仍生效，但需确保子元素为 position: absolute，否则内容会被顶出容器
不要在同一个元素上同时设 height 或 min-height，会覆盖比例逻辑

图片要裁剪显示？`ratio` 只管容器，裁剪靠 `object-fit` 和 `overflow`

ratio-16x9 只撑开一个 16:9 的空盒子，里面放一张 4:3 的图，默认会拉伸变形或上下留白。真正控制怎么填满，得靠组合：

立即学习“前端免费学习笔记（深入）”；

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

给 <img alt="如何在Bootstrap 5中通过CSS实现响应式固定比例矩形？" > 加 class="w-100 h-100 object-fit-cover"（object-fit-cover 是 Bootstrap 5 内置类）
确保父容器（即 ratio 容器）没设 overflow: visible；如果外层是 <div class="card">，得额外加 <code>overflow-hidden
若用 background-image 替代 <img alt="如何在Bootstrap 5中通过CSS实现响应式固定比例矩形？" >，则用 background-size: cover + background-position: center

漏掉 object-fit 或 overflow-hidden，就容易看到圆角被撑破、文字压到图片边缘、或裁剪错位。

为什么有时 `aspect-ratio` 看似不生效？大概率是父容器没宽度锚点

aspect-ratio 计算依赖父容器宽度。如果 ratio 容器的父级是 col 但没设宽度约束（比如 col-auto 或 flex 中未设 flex-basis），或者父级本身 width: auto 且无 BFC 触发，浏览器就无法推导“1份宽”是多少像素，比例自然失效。