根本原因是.card-img-top仅设width:100%和height:auto，不约束宽高比，导致图片被迫变形；必须配合aspect-ratio定义容器比例，并设height:100%和object-fit:cover才能生效。
为什么.card-img-top的图片总是被拉伸或裁剪错位
根本原因不是图片本身有问题，而是.card-img-top只设了width: 100%和height: auto，它完全不管容器宽高比。一旦卡片高度由内容、栅格列或min-height间接决定，图片就会被迫变形——人脸变宽、竖图压扁、文字被挤到卡片底部，都是这个逻辑的自然结果。
必须同时控制容器比例 + 图片填充方式
单独改.card-img-top的object-fit没用，它需要一个有明确宽高关系的父容器才能生效。现代解法是把aspect-ratio加在.card上，再让图片填满并裁剪：
-
.card { aspect-ratio: 16 / 9; }—— 宽高比定义在卡片容器，不是图片上 -
.card-img-top { width: 100%; height: 100%; object-fit: cover; }——height: 100%是关键，否则object-fit不触发 - 若卡片含
.card-body，需防止它撑开高度：.card-body { flex-grow: 0; }或overflow: hidden;
旧浏览器兼容：padding-top伪比例容器
IE11、Safari ≤15.3 不支持aspect-ratio，得用padding-top技巧模拟。核心是利用padding-top值按父宽计算的特性：
- 外层容器加
position: relative和padding-top: 56.25%（16:9 = 9/16） -
.card-img-top改为position: absolute; top: 0; left: 0; width: 100%; height: 100%; - 别漏掉
overflow: hidden，否则裁剪部分会溢出边框 - Bootstrap 4 用户必须手动给
.card加position: relative，5 已默认包含
cover 和 contain 的实际取舍点
object-fit: cover和object-fit: contain不是风格偏好，而是内容安全边界：
-
cover：适合封面图、轮播图——填满无黑边，但可能切掉人脸、LOGO 或关键文字区域 -
contain：适合证件照、产品白底图——完整保留内容，但上下/左右必留白，需同步设background-color防露底 - 别在
:hover里动态改object-fit，浏览器不重排，视觉无变化 - 想微调裁剪焦点（比如让人脸始终在顶部），用
object-position: top center，不是text-align
.card-img-top是.card的**直接子元素**。如果图片被包在额外div里，或者塞进了.card-body，整个比例链就断了——此时再调aspect-ratio也没用。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
