Bootstrap 4卡片：保持卡片内图片位置同时维持响应式

我用Bootstrap 4制作了一行卡片，给每张卡片添加了一张额外图片（红色箭头标注）。希望在保持所有图片响应式的同时，维持该额外图片相对于.card-img-top的位置，但调整浏览器窗口大小时，额外图片会覆盖.card-img-top的图片，这不是我想要的。期望的图片位置如下：

请问能否通过Bootstrap工具类或额外CSS实现该需求？感谢指导。

可以通过调整布局结构，结合Bootstrap内置定位工具类和少量自定义CSS实现需求，核心是让额外图片基于.card做绝对定位，同时给.card-body预留足够顶部空间避免内容遮挡：

步骤1：修改HTML结构 #

给.card添加position-relative（Bootstrap内置工具类，开启相对定位），将额外图片容器从.card-body中移出，放在.card-img-top与.card-body之间：

<div class="card shadow bg-white position-relative">
  <div class="card-img-top">
    <img src="https://placebear.com/960/540" class="d-block mx-auto card-img img-fluid" alt="">
  </div>
  <!-- 额外图片容器移至此处 -->
  <div class="product-profile-img position-absolute w-100">
    <div class="prod-img">
      <img src="https://placebear.com/400/456" class="d-block mx-auto img-fluid img-thumbnail" alt="">
    </div>
  </div>
  <div class="card-body product-img pt-5"> <!-- 添加pt-5预留顶部空间 -->
    <h4 class="card-title">Lorem ipsum dolor sit amet.</h4>
    <h5 class="card-date">Lorem ipsum dolor sit.</h5>
    <p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Rem quis sequi ab cum a in ea, voluptas, itaque distinctio doloremque eum. Provident mollitia eveniet minima?</p>
    <p class="card-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus dignissimos recusandae asperiores sequi nihil?</p>
  </div>
  <div class="card-footer">
    <a href="#" target="_blank" rel="noopener" class="btn btn-primary">Learn More</a>
  </div>
</div>

步骤2：调整CSS样式 #

移除原有的负margin，改用绝对定位控制额外图片位置，同时确保图片响应式：

/* Cards */
.card {
  border-radius: 1% !important;
  border: 1px solid rgba(0, 0, 0, .150);
}
.card-title {
  color: #000;
  font-weight: 700;
}
.card-date {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
}
/* 修改额外图片相关样式 */
.product-profile-img {
  top: 70%; /* 调整该值控制垂直位置，基准为.card */
  transform: translateY(-50%); /* 实现垂直居中 */
}
.prod-img img {
  max-width: 250px; /* 用max-width替代固定width，保持响应式 */
  max-height: 250px;
  -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 10%;
}
.card-text {
  font-size: 1.2rem;
}
.card-footer {
  padding: .75rem 1.25rem;
  background-color: rgba(0, 0, 0, .001);
  border-top: 1px solid rgba(0, 0, 0, .125);
}

关键说明 #

• position-relative给.card开启相对定位，让内部绝对定位元素以它为基准
• position-absolute让额外图片脱离文档流，不影响.card-body布局，通过top和transform精准控制垂直位置
• max-width/max-height替代固定宽高，确保图片在小屏幕自动缩放，维持响应式
• .card-body添加pt-5（Bootstrap内边距工具类），为额外图片预留空间，避免遮挡内容

调整后，无论窗口如何缩放，额外图片都会保持相对于.card-img-top的位置，不会覆盖顶部图片，同时所有图片均保持响应式。

内容的提问来源于stack exchange，提问作者Mark Fenwick