要实现Card中图片保持宽高比并自动裁剪，需放弃.card-img-top，改用aspect-ratio+object-fit:cover（现代浏览器）或padding-bottom技巧（兼容IE/旧Safari），确保容器比例固定且图片居中裁剪。
Card中图片如何保持宽高比并自动裁剪
Bootstrap默认的.card-img-top只是把图片拉伸填满宽度，高度由内容撑开，无法控制宽高比；真正要实现“容器比例固定 + 图片居中裁剪”，得放弃.card-img-top，改用background-image配合object-fit: cover或CSS容器裁剪方案。
用object-fit: cover配合aspect-ratio最直接
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持aspect-ratio，结合object-fit: cover可一行代码搞定：
<div class="card">
<div class="card-img-container" style="aspect-ratio: 16/9;">
<img src="photo.jpg" class="w-100 h-100" style="max-width:90%" alt="">
</div>
<div class="card-body">...</div>
</div>-
aspect-ratio: 16/9强制容器保持比例，不依赖父级高度 -
object-fit: cover让图片等比缩放并裁剪，填满整个容器 -
w-100 h-100确保<img alt="Bootstrap如何让图片在Card卡片中根据容器比例自动剪裁" >占满父容器，否则裁剪无效 - 注意：IE和旧版Safari不支持
aspect-ratio，需降级处理
兼容IE/旧Safari：用padding-bottom技巧模拟比例容器
当必须支持IE或老版本Safari时，用伪元素+padding-bottom生成响应式比例容器：
<div class="card">
<div class="card-img-wrapper">
<img src="photo.jpg" class="card-img-cover" alt="">
</div>
<div class="card-body">...</div>
</div>对应CSS：
.card-img-wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%; /* 16:9 = 9/16 ≈ 0.5625 */
overflow: hidden;
}
.card-img-cover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}-
padding-bottom百分比基于父容器宽度计算，实现“宽高比锁定” - 必须用
position: absolute让<img alt="Bootstrap如何让图片在Card卡片中根据容器比例自动剪裁" >脱离文档流，否则会被padding-bottom撑开 - 如果卡片有边框或阴影，记得给
.card-img-wrapper加border-radius，否则裁剪边缘会露白
为什么不用.card-img-top + height硬设？
很多人试过给.card-img-top加height: 200px或max-height，结果发现：
- 响应式失效：小屏下图片被压缩变形，或留白过大
- 不同图源尺寸差异大，固定高度会导致部分图片严重裁切头部（人脸被切掉）
-
.card-img-top本身是块级元素，没有内置比例约束，纯靠外部干预难统一 - Bootstrap 5.3+ 的
.card-img类也不提供裁剪能力，它只负责定位，不控制缩放行为
真正可控的裁剪，必须把比例控制权交给容器，再让图片服从这个容器——而不是反过来让图片决定容器形态。
