根本原因是.card-img-top只设width:100%和height:auto，不约束宽高比，导致原始图与容器比例不匹配时被强制拉伸；必须配合height或aspect-ratio及object-fit:cover才能生效。
为什么.card-img-top图片会拉伸变形
根本原因是 .card-img-top 只设了 width: 100% 和 height: auto，完全不约束宽高比。原始图是 4:3，容器是 16:9，浏览器只能硬拉——脸变宽、竖图压扁、构图全毁。这不是 Bug，是 Bootstrap 故意留的“自由度”，但你得自己收住。
用 object-fit: cover + 显式高度最直接
现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）下，这是最快见效的解法：
-
.card-img-top必须加height（比如height: 200px或aspect-ratio: 4/3），否则object-fit: cover不生效 - 补上
object-fit: cover和object-position: center（或top，防小屏切掉人脸） - 别只写
width: 100%—— 那会让高度随原始比例浮动，破坏对齐 - 示例：
<img src="..." class="card-img-top" style="height: 180px; object-fit: cover; object-position: center">
卡片高度不一致导致图片“看似对齐实则错位”
文字长短不同 → .card-body 高度不同 → 整个卡片高度浮动 → 图片顶部视觉错位。关键不是图本身，是卡片容器没控高：
- 给
.card加h-100或style="height: 100%"，并在父容器（如.row）启用display: flex -
.card-body要加d-flex flex-column，内部文字容器（如.card-text）加flex-fill填满剩余空间 - 避免给
.card-body设min-height—— 它会让短文本卡片也撑高，白占空间
圆角失效、边缘露出来、IE 兼容怎么搞
加了 rounded 或 rounded-circle 却不圆？大概率卡在三个地方：
-
.card没设overflow: hidden—— 圆角只是描边，不裁内容，必须补上 -
.card-img-top不是.card的直接子元素（比如被<div>包了一层）—— 样式彻底失效 - IE11 下
border-radius: 50%渲染异常，rounded-circle别指望它真圆；改用容器裁切：<div class="rounded-circle overflow-hidden"><img class="w-100 h-100" style="object-fit: cover"></div>
真正容易被忽略的是：哪怕所有样式都写了，只要 .card 父容器有 padding 且没重置 box-sizing: border-box，溢出裁切就可能偏移一两个像素——这种细节在多卡片网格里特别显眼。
