直接给 img 加 object-fit: cover 没用，因为 .col 作为 flex item 无明确高度，img 缺乏宽高约束边界；必须用 .ratio 容器（如 ratio-16x9）锁定比例、加 overflow-hidden 裁剪溢出、再配 w-100 h-100 和 object-fit-cover 才生效。
直接给 img 加 object-fit: cover 为什么没用？
因为 .col 默认是 flex item，不设高度，img 缺乏宽高约束边界——object-fit 只在父容器有明确尺寸时才生效。常见现象是图片被强行拉伸、只显示左上角、或整体溢出容器。
必须用 .ratio 容器配合 overflow-hidden
.ratio 类（如 ratio-4x3、ratio-1x1）通过 padding-top 百分比锁定宽高比，但它本身不裁剪；overflow-hidden 才是关键开关，否则 object-fit: cover 的裁剪部分仍会溢出。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
.ratio提供比例“画布”，但不控制内容渲染 -
overflow-hidden必须加在.ratio容器上，不能只加在img上 -
img必须同时加w-100 h-100，否则无法填满容器，object-fit就没作用对象 - Bootstrap 5.3+ 支持
object-fit-cover工具类；旧版本需手动写style="object-fit: cover;"
别依赖 img-fluid 控制比例
img-fluid 只设 max-width: 100% 和 height: auto，它让图片宽度响应式，但高度自由伸缩——完全不管宽高比。直接把 img-fluid 塞进 .col，图片依然会被拉伸或撑高错位。
- 正确用法：把
img-fluid放在.ratio内部的img上，作为兜底缩放规则 - 如果图源尺寸不可控（如 CMS 上传），务必额外加
style="object-fit: cover;"，否则小图会被拉伸变形 - IE 11 及更早版本不支持
object-fit，此时需降级：用背景图 +background-size: cover，或引入 polyfill
移动端和桌面端比例不同怎么办？
不能只靠一个 ratio-16x9 —— 移动端常需竖构图（如 ratio-4x5），桌面端用横构图（如 ratio-16x9）。Bootstrap 5.3+ 支持断点响应式 ratio 类，但需手动组合。
- 写法示例：
<div class="ratio ratio-4x5 ratio-md-16x9"> <li>注意：<code>ratio-md-16x9仅在md及以上生效，小屏回退到ratio-4x5 - 若用 Bootstrap 4 或旧版，需手写媒体查询覆盖
padding-top值 - 避免在同一个
.col里混用不同比例的.ratio，会导致列高不一致、网格错位
实际生效的关键不在类名堆砌，而在三层结构是否闭环：**容器有比例（
.ratio）→ 容器裁剪（overflow-hidden）→ 图片填满且裁剪（w-100 h-100 object-fit: cover）**。漏掉任意一层，拉伸或溢出就会回来。
