object-fit: cover失效主因是容器无明确高度基准，需配合aspect-ratio、height: 100%及overflow: hidden才能生效；否则退化为fill拉伸。
为什么object-fit: cover加了也没用
不是写错了，是浏览器根本没“框”可裁——.card-img-top默认只有width: 100%和height: auto，父容器.card高度又由内容撑开，整个渲染链没有明确高度来源。object-fit需要一个可计算的容器尺寸才能生效，否则静默退化为fill（强制拉伸）。
常见错误现象：.card-img-top里的人脸变宽、竖图被压成横图、文字被挤压。这不是 Bootstrap bug，是 CSS 默认行为。
-
img-fluid类自带height: auto，必须显式覆盖它 - 别只在
<img>上写style="max-width:90%"，Bootstrap 的 CSS 优先级会盖掉它 - 如果卡片嵌套在 flex 容器里，还要防
align-items: stretch偷偷拉高图片
现代解法：用aspect-ratio + object-fit
Chrome 88+、Firefox 89+、Safari 15.4+ 都支持，目前最干净可控的方式。关键点在于：容器定形，图片定裁。
-
aspect-ratio必须加在.card上，不能加在.card-img-top或<img>上 -
.card-img-top必须设height: 100%，否则object-fit不触发 - 若卡片内有
.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 及更早版本不支持aspect-ratio，这时得靠 padding 模拟高度。
- 原理：
padding-top值按父容器宽度计算，比如padding-top: 56.25%对应 16:9（9 ÷ 16 = 0.5625） -
.card-img-top要用position: absolute填满这个“伪容器” - 放弃
<img>语义和可访问性？那就用background-image降级，但必须补aria-label或title
.card-img-container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
}
.card-img-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: cover vs object-fit: contain怎么选
这不是视觉偏好问题，而是内容语义决定的：这张图里，哪部分绝对不能丢？
-
cover：填满容器、允许裁剪 → 适合轮播封面、产品主图、头像；但默认object-position: center center可能切掉人脸，需配object-position: center top微调 -
contain：完整显示、留白补足 → 适合证件照、UI 图标、技术配图；此时object-position几乎无效 -
fill：强制拉伸变形 → 一律避免，除非刻意做故障效果
移动端特别要注意：小屏上cover容易切掉关键区域，尤其人脸偏上或文字在底部时，object-position: center top是刚需。
最常被忽略的一点是：object-fit没配明确高度，等于没写；而align-self加得再勤，也救不了没锁住尺寸弹性的图片。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
