card图片拉伸变形的根源在于.card-img仅设width:100%而不限制高度，需用aspect-ratio+object-fit（现代）或padding-top技巧（兼容旧浏览器）实现等比缩放，禁用background-image以保障语义与可访问性。
card 中图片拉伸变形？用 .card-img 类不是万能解
bootstrap 默认的 .card-img 会强制撑满容器宽度，但高度不约束，导致图片被纵向拉伸。这不是 bug，是设计使然——它只负责「铺满宽度」，不处理宽高比。真要按容器比例缩放（比如 16:9、4:3），得放弃默认行为，改用更可控的方案。
-
.card-img本质是width: 100%; height: auto;，仅保证等比缩放原始尺寸，不响应容器宽高比 - 如果 Card 容器本身高度固定（如
height: 200px;），.card-img会直接裁剪或拉伸，无法保持比例 - 真正需要的是「容器定义宽高比 + 图片居中覆盖」，这靠 CSS
aspect-ratio或 padding-top 技巧实现
用 aspect-ratio + object-fit 控制比例和裁剪方式
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）支持 aspect-ratio，配合 object-fit 是最干净的解法。把图片作为 <div> 的背景或独立 <code><img> 均可，但推荐后者以保留语义和可访问性。
<div class="card">
<div class="card-img-container" style="aspect-ratio: 16/9;">
@@##@@
</div>
<div class="card-body">...</div>
</div>
-
aspect-ratio: 16/9让容器自身维持比例，不受父级高度影响 -
object-fit: cover保证图片填满且等比缩放，超出部分裁剪；用contain则留白，不推荐用于卡片封面 - 务必移除
.card-img-top默认的height: auto;冲突，所以显式加style="object-fit: cover;"更可靠
兼容老浏览器？用 padding-top 百分比技巧模拟 aspect-ratio
IE 和旧版 Safari 不支持 aspect-ratio，需降级方案：用 padding-top 配合绝对定位撑开容器高度。原理是 padding 百分比基于父容器宽度计算，从而锁定宽高比。
<div class="card">
<div class="card-img-wrapper" style="position: relative; width: 100%; padding-top: 56.25%;"> <!-- 16:9 = 9/16 = 56.25% -->
@@##@@
</div>
<div class="card-body">...</div>
</div>
-
padding-top: 56.25%对应 16:9，4:3 是75%，1:1 是100% - 图片必须设
position: absolute才能填满 padding 撑出的空间 - 此写法在 Bootstrap 5 中无需额外类，但要注意
.card-body会紧贴 wrapper 下方，无间隙——若需间距，给.card-body加margin-top
为什么不用 background-image？语义和 SEO 风险
有人倾向用 div + background-image 实现比例缩放，虽然写起来简单，但实际埋坑：
- 图片无法被搜索引擎索引，
alt文本丢失，无障碍阅读器读不到 - 响应式场景下，
background-size: cover行为与object-fit: cover不完全一致，尤其在小屏设备上容易偏移焦点区域 - Bootstrap 的
.card-img-*类对 background 不生效，后续维护成本高 - 除非是纯装饰图，否则优先用
<img src="photo.jpg" class="card-img-top" alt="..." style="max-width:90%">标签
关键点始终是：比例控制在容器层（aspect-ratio 或 padding-top），缩放逻辑在图片层（object-fit）。别指望一个类名解决所有问题，尤其是当 Card 高度由内容驱动时，aspect-ratio 才是唯一能守住比例的手段。
