Bootstrap Card的card-img-top图片无法与卡片圆角完美贴合问题

问题根因 #

• 类名使用错误：你尝试添加的img-rounded是Bootstrap 3版本的废弃类，Bootstrap 4/5中不存在该类，无法生效；同时Title6、Title7、Title8对应的三个<img>标签完全没有添加card-img-top类，不会继承卡片顶部图片的默认圆角样式。
• 样式被自定义CSS覆盖：你引入的tourpackageStyles.css中大概率存在全局样式重置，比如给img或.card设置了border-radius: 0、关闭了卡片的溢出裁剪、给图片添加了额外边框/变换属性，都会覆盖Bootstrap默认的卡片圆角规则。
• 卡片结构不规范：前两个卡片的操作按钮直接作为.card的直接子元素放在card-body外部，没有放到card-footer容器中，会干扰Bootstrap对卡片直接子元素的圆角适配逻辑，导致边角样式错乱。
• 本地图片适配问题：本地路径加载的wildlife_tour.jpg如果自带白边、透明边，也会出现圆角和卡片不贴合的视觉差异。

修复步骤 #

1. 清理错误类名，补全缺失样式
   删掉所有img标签上无效的img-rounded类，给所有卡片顶部的图片统一加上card-img-top类，包括之前src为空的三个图片标签。
2. 强制设置卡片裁剪规则，避免样式覆盖
   在自定义CSS文件中添加以下代码，强制锁定卡片和顶部图片的圆角、开启溢出裁剪，防止其他全局样式干扰：

/* 锁定卡片基础圆角和溢出裁剪 */
.card {
  overflow: hidden;
  border-radius: 0.375rem !important; /* 该值为Bootstrap5默认卡片圆角，若你修改过全局圆角值替换为对应数值即可 */
}
/* 单独指定顶部图片圆角，和卡片边角对齐 */
.card-img-top {
  border-top-left-radius: calc(0.375rem - 1px) !important;
  border-top-right-radius: calc(0.375rem - 1px) !important;
}

3. 修正卡片内部结构
   把卡片底部的操作按钮放到card-footer容器中，不要直接作为.card的一级子元素，避免圆角样式冲突，参考结构如下：

<div class="card h-100">
  <img src="图片地址" alt="" class="card-img-top">
  <div class="card-body">
    <div class="card-title">标题</div>
  </div>
  <div class="card-footer bg-transparent border-top-0">
    <a target="_blank" rel="noopener noreferrer" href="#" role="button" class="btn btn-sm btn-secondary">Enquire</a>
  </div>
</div>

4. 排查冲突样式
   检查自定义CSS中是否存在针对img标签的全局border、transform、border-radius重置规则，如果存在且不需要全局生效，缩小选择器范围，避免影响卡片内的图片渲染。

如果你使用的是Bootstrap 3版本，没有card-img-top类，直接给卡片加overflow: hidden，给顶部图片加border-radius: 4px 4px 0 0即可实现相同效果。

内容的提问来源于stack exchange，提问作者pattrick james