Bootstrap 5.3+ 中需用 ratio 容器（如 ratio-16x9）包裹图片并配合 object-fit-cover，因 img 元素固有尺寸会覆盖 aspect-ratio；旧版本须用 padding-top 技巧模拟比例，且需 relative 定位；cover 裁剪填满，contain 完整留白。
Bootstrap 5.3+ 中直接用 aspect-ratio 控制图片比例
Bootstrap 5.3 开始原生支持 aspect-ratio，但默认不给 <img alt="如何在Bootstrap中让图片保持16:9比例_使用CSS的aspect-ratio属性" > 加——因为图片本身有固有宽高，会覆盖该属性。想让图片稳定保持 16:9，得绕过这个限制。
常见错误是直接写：<img src="..." class="w-100" style="max-width:90%" alt="如何在Bootstrap中让图片保持16:9比例_使用CSS的aspect-ratio属性" >，结果没用：浏览器优先按图片原始尺寸渲染，aspect-ratio 被忽略。
- 必须把图片包在容器里，对容器设
aspect-ratio，再让图片填满容器 - 容器需设
overflow: hidden防止图片溢出 - 图片加
object-fit: cover（推荐）或contain，否则拉伸变形
<div class="ratio ratio-16x9"> <img src="photo.jpg" class="w-100 h-100 object-fit-cover" alt="如何在Bootstrap中让图片保持16:9比例_使用CSS的aspect-ratio属性" > </div>
注意：ratio-16x9 是 Bootstrap 内置类，它等价于 aspect-ratio: 16/9，且已设好 position: relative 和 overflow: hidden，比手写更稳妥。
Bootstrap 5.2 及更早版本不支持 ratio 类怎么办
这些版本没有 ratio 工具类，也不能直接依赖 aspect-ratio（IE 完全不支持，旧版 Safari 仅部分支持）。得用传统 padding-top 技巧模拟。
立即学习“前端免费学习笔记（深入）”；
- 创建一个空容器，用
padding-top: 56.25%（即 9/16）撑出 16:9 高度 - 图片用绝对定位铺满，
top: 0; left: 0; width: 100%; height: 100% - 必须加
position: relative到外层，否则绝对定位失效
<div class="position-relative" style="padding-top: 56.25%"> <img src="photo.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="如何在Bootstrap中让图片保持16:9比例_使用CSS的aspect-ratio属性" > </div>
这种写法兼容到 IE9，但维护成本高；如果项目已升级到 Bootstrap 5.3+，优先用 ratio 类。
object-fit 选 cover 还是 contain？
这取决于内容优先级：
-
object-fit: cover：裁剪图片以填满容器，保证无黑边、比例严格，但可能切掉关键区域（比如人脸） -
object-fit: contain：完整显示图片，留白保全内容，但上下或左右会出现透明/背景色区域 - Bootstrap 5.3+ 的
object-fit-cover和object-fit-contain类可直接用，无需额外 CSS
响应式场景下，cover 更常用；做证件照、产品图预览等需完整展示的场景，才选 contain。
为什么不用 height: 0; padding-bottom: 56.25%？
有人习惯用 height: 0 + padding-bottom 实现比例容器，但在 Flex/Grid 布局中容易出问题：
- 当父容器是
display: flex时，height: 0可能被忽略，导致高度塌陷 - Bootstrap 的
ratio类内部用的是aspect-ratio+min-height: 0，更健壮 - 现代项目应优先信任
aspect-ratio，只在需要兼容旧环境时降级为 padding 技巧
真正容易被忽略的是：哪怕用了 ratio-16x9，如果图片加载失败或路径错误，容器仍会维持 16:9 空白框——得配合 onerror 或懒加载库处理 fallback。
