现代浏览器可用 aspect-ratio + object-fit 实现 16:9 自动裁剪：父容器设 aspect-ratio: 16 / 9 和 overflow: hidden，img 设 width: 100%; height: 100%; object-fit: cover；旧版兼容推荐 Bootstrap .ratio 类；避免 background-image 因响应式与可访问性问题；注意原图分辨率、长宽比及 CSS 冲突。
用 aspect-ratio + object-fit 最简实现
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）直接支持 aspect-ratio，配合 object-fit: cover 就能达成 16:9 自动剪裁效果，无需额外 wrapper 或 JS。
关键不是“让图片拉伸”，而是“容器定比例 + 图片居中裁剪”：
-
aspect-ratio: 16 / 9固定列内容器高宽比（注意：不是设在<img>上，而是它的父容器） -
overflow: hidden防止溢出（虽object-fit通常已够用，但保险起见） -
<img>必须设width: 100%; height: 100%，否则object-fit不生效 -
object-fit: cover确保等比缩放并填满，超出部分裁剪
<div class="col-6">
<div style="aspect-ratio: 16 / 9; overflow: hidden;">
<img src="photo.jpg" alt="" style="width: 100%; height: 100%; object-fit: cover;">
</div>
</div>
Bootstrap 5 的 .ratio 工具类更稳妥
如果需要兼容旧版浏览器（如 IE 或早期 Edge），或想复用 Bootstrap 内置逻辑，优先用 .ratio 类 —— 它通过伪元素 + padding-bottom 实现响应式比例，兼容性更好。
注意：它要求子元素是 <img> 或 <iframe>，且必须加 .ratio-16x9 和 .position-relative：
-
.ratio本身只提供基础比例容器结构 -
.ratio-16x9是具体比例类（还有1x1、4x3等） -
.position-relative是为了后续绝对定位子元素（如覆盖文字）预留的，非必需但推荐带上 -
<img>仍需width: 100%; height: 100%; object-fit: cover，否则会拉伸变形
<div class="col-6">
<div class="ratio ratio-16x9 position-relative">
<img src="photo.jpg" class="w-100 h-100" style="object-fit: cover;" alt="">
</div>
</div>
为什么不用 background-image？
有人习惯用 CSS 背景图配 background-size: cover，但在 Bootstrap 的 .col 中容易出问题：
-
.col默认是flex子项，高度由内容撑开；没内容时高度为 0，背景图不显示 - 必须手动设
min-height或height，破坏响应式语义 - 无法设置
alt属性，影响可访问性与 SEO - 无法响应
srcset或懒加载（loading="lazy"）
所以除非明确需要背景图叠加图层，否则坚持用 <img> + object-fit 更可控。
常见错误：图片模糊或裁剪不准
即使代码写对，实际效果仍可能偏移或模糊，原因往往不在 CSS：
- 原图分辨率太低（比如只有 800px 宽却放大到 1200px 容器），
object-fit: cover会放大模糊 —— 检查srcset或换更高清源图 - 图片本身长宽比极端（如 1:3 或 4:1），
cover会裁掉大量内容 —— 此时要考虑是否真适合放 16:9 区域 - Bootstrap 的
.col在小屏下可能变宽（如col-12），导致容器宽度突变，裁剪区域跳变 —— 可加min-width: 0防 flex 压缩，或用col-md-6锁定断点 - 某些 CMS 或框架自动给
<img>加了max-width: 100%，和width: 100%冲突 —— 检查 computed styles，必要时用!important覆盖（不推荐，优先改源样式）
裁剪位置默认居中，如果想控制焦点（比如人脸始终在画面中央），得靠原图构图或服务端生成带焦点的缩略图，CSS 本身做不到智能重定位。
