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，但默认不给 加——因为图片本身有固有宽高，会覆盖该属性。想让图片稳定保持 16:9，得绕过这个限制。

常见错误是直接写：，结果没用：浏览器优先按图片原始尺寸渲染，aspect-ratio 被忽略。

• 必须把图片包在容器里，对容器设 aspect-ratio，再让图片填满容器
• 容器需设 overflow: hidden 防止图片溢出
• 图片加 object-fit: cover（推荐）或 contain，否则拉伸变形

<div class="ratio ratio-16x9">
  @@##@@
</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%">
  @@##@@
</div>

这种写法兼容到 IE9，但维护成本高；如果项目已升级到 Bootstrap 5.3+，优先用 ratio 类。

VPS Bootstrap

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

下载

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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！