根本原因是.card-img-top仅设width:100%和height:auto，不约束容器高度；需用aspect-ratio+object-fit或padding-top技巧控制比例，且图片必须有明确宽高上下文。
为什么.card-img-top里的图片总是被拉伸
根本原因不是 Bootstrap 写错了，而是 .card-img-top 默认只设了 width: 100% 和 height: auto，它不管容器高矮，只按图片原始比例缩放。一旦卡片高度被内容、网格或 CSS 拉扯（比如 min-height: 200px），图片就会纵向拉伸或横向压缩——人脸变宽、竖图压扁，都是这个逻辑的自然结果。
用 aspect-ratio + object-fit 控制比例（现代浏览器首选）
Chrome 88+、Firefox 89+、Safari 15.4+ 都支持，写法干净、响应式友好：
-
aspect-ratio必须加在.card上（不是.card-img-top），否则无法约束容器尺寸 -
.card-img-top必须设height: 100%，否则object-fit: cover不生效 - 若卡片内含
.card-body，建议加flex-grow: 0或overflow: hidden，防止文字撑开容器高度
示例：
.card {
aspect-ratio: 16 / 9;
}
.card-img-top {
width: 100%;
height: 100%;
object-fit: cover;
}
兼容旧浏览器：用 padding-top 百分比技巧
IE11、Safari ≤15.3、旧版 Android WebView 不支持 aspect-ratio，得靠 padding 撑高：
立即学习“前端免费学习笔记（深入）”；
- 外层容器需
position: relative，否则内部position: absolute的图片会定位错乱 -
padding-top值 = 目标高度 ÷ 宽度 × 100%，例如 16:9 →56.25%，4:3 →75% -
.card-img-top要改用position: absolute; top: 0; left: 0; width: 100%; height: 100%，再配object-fit: cover
示例：
<div class="card-img-container position-relative" style="padding-top: 56.25%"> <img src="photo.jpg" class="position-absolute top-0 start-0 w-100 h-100" style="object-fit: cover;"> </div>
别踩这些坑
容易忽略但实际高频出问题的点：
- 直接给
.card设height: 200px—— 这会破坏响应式，且让aspect-ratio失效；改用min-height或纯aspect-ratio - 混用
img-fluid和.card-img-top——img-fluid的max-width: 100%和height: auto与卡片比例控制逻辑冲突，导致高度不可控 - 用
background-image替代<img>—— 语义丢失、SEO 受损、屏幕阅读器不可读，除非你明确放弃可访问性 - 在
.col上直接写aspect-ratio—— flex 布局下它常不生效，必须套一层独立<div>作为比例容器
最易被跳过的细节是：无论用哪种方案，object-fit 生效的前提，永远是图片元素有明确的宽高上下文 —— 它不会自己“猜”容器该多高。
