根本原因是.card-img-top仅对.card的直接子元素且紧跟开头的生效；若图片被div等容器包裹，则样式完全不触发。
为什么 .card-img-top 没生效，图片还是在左上角？
根本原因：图片没被识别为卡片的“语义顶部子元素”。.card-img-top 不是万能定位类，它只对 .card 的**直接子元素**且**紧跟在开头之后**的 <img> 生效。
常见错误现象：<div class="card"><div><img class="card-img-top"></div></div> —— 这里 <img> 是嵌套在 <div> 里的，<code>.card-img-top 完全不触发样式逻辑。
- 必须写成：
<div class="card"> <img src="..." class="card-img-top"><div class="card-body">...</div> </div> - 不能加 wrapper 容器（如
<figure></figure>、<div class="img-wrapper">）包住图片 <li>如果要用懒加载，<code>loading="lazy"可以加，但别动结构层级 - 要实现“图在上 + 图在下”，得用
.card-img-overlay+ 背景图 + 绝对定位，或改用自定义布局（放弃原生卡片语义） -
.card-img-bottom的行为和.card-img-top对称，但它的 margin-top 默认是 0，容易和.card-body下边距打架，建议手动加mt-2微调 - 别指望靠
order或flex-direction: column-reverse翻转顺序——.card默认不是 flex 容器，强行改会破坏内部流式计算 - 加
object-fit: cover是最简方案：.card-img-top { object-fit: cover; height: 180px; }（注意：必须设高度，否则cover无效） - 圆角要统一生效，得同时设
.card { border-radius: 0.5rem; }和.card-img-top { border-radius: 0.5rem 0.5rem 0 0; } - 溢出问题大多来自父容器
overflow: hidden缺失，给.card加上即可 - 响应式高度建议用
min-height+aspect-ratio（现代浏览器），比如.card-img-top { aspect-ratio: 4/3; height: auto; } - 需要 SEO、可访问性、响应式
srcset→ 死守<img class="card-img-top">，用object-fit: cover+ 固定容器高 - 要精确控制渐变叠加、hover 动画、多层蒙版 → 改用
<div class="card-img-bg" style="background-image: url(...)">，再手动加 <code>aria-label和role="img" - 千万别混用：比如
<img>叠在background-image上，会导致双图加载、对比度失控、暗色模式下颜色错乱
.card-img-top 和 .card-img-bottom 能不能同时用？
不能。一个 .card 容器内最多只能有一个 .card-img-top 或一个 .card-img-bottom，且二者互斥——Bootstrap 的 CSS 规则里它们的 margin、position、display 属性是按“单图场景”设计的。
常见错误现象：同时加两个类，或把 .card-img-bottom 放在 .card-body 后面但前面还有个 .card-img-top，结果底部图片被挤出容器、文字重叠、响应式错乱。
图片拉伸变形、溢出卡片、圆角丢失怎么办？
.card-img-top 本身不控制宽高比，也不处理裁剪。它只是把图片当块级元素塞进去，剩下的全靠你补。
常见错误现象：竖图被压扁、小图被撑满失真、圆角只出现在图片边缘但卡片整体仍有直角、小屏上图片宽度突破卡片边界。
想让图片铺满整个卡片背景，还能读取 alt 文字吗？
不能两全。用 background-image 就失去 alt、srcset、懒加载和语义化能力；用 <img> 就没法真正“铺满背景”（.card-img-top 始终是内容流的一部分）。
真实项目中该选哪个，取决于优先级：
最易被忽略的一点：所有基于 .card-img-top 的样式修复，都依赖 .card 有明确宽度（来自 .col-* 或 width），如果卡片父容器是 display: inline-block 或浮动未清除，object-fit 和 border-radius 都会失效。
