如何用Bootstrap实现超卡片尺寸内嵌图片及指定样式卡片？

通过Bootstrap工具类+少量自定义CSS即可实现核心效果，关键是利用overflow-hidden裁剪超出卡片的图片部分：

1. 给卡片容器添加overflow-hidden，确保图片超出卡片的区域被裁剪，视觉上仍内嵌在卡片内。
2. 给图片设置大于卡片的宽度（比如自定义w-150类，宽度150%），并用mx-auto让图片居中，这样图片左右超出卡片的部分会被容器裁剪。

示例代码：

<style>
.w-150 { width: 150%; }
</style>

<div class="card overflow-hidden" style="max-width: 300px;">
  <img src="your-image.jpg" class="w-150 mx-auto" alt="示例图">
  <div class="card-body">
    <h5 class="card-title">卡片标题</h5>
    <p class="card-text">卡片内容文本</p>
    <a href="#" class="btn btn-primary">按钮</a>
  </div>
</div>

若要让图片垂直方向溢出，可给图片加mt-n5这类Bootstrap负margin类，让图片向上超出卡片顶部，同时保持卡片的overflow-hidden。

参考图的核心特征是顶部图片超出卡片左右边界，卡片主体带圆角、阴影，布局清晰。以下是实现代码：

首先引入Bootstrap 5.3.3 CSS：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

完整卡片代码：

<style>
/* 实现图片超出卡片左右的效果 */
.card-img-extended {
  width: 110%;
  margin-left: -5%; /* 向左偏移抵消宽度超出的部分，让图片居中溢出 */
}
</style>

<div class="container py-5">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card rounded-4 shadow-sm border-0">
        <!-- 溢出图片容器 -->
        <div class="overflow-hidden">
          <img src="your-image.jpg" class="card-img-extended" alt="卡片封面">
        </div>
        <div class="card-body p-4">
          <h5 class="card-title fw-bold">示例卡片标题</h5>
          <p class="card-text text-muted mb-4">
            这里是卡片的描述文本，用于补充卡片的核心信息，风格简洁清晰。
          </p>
          <div class="d-flex justify-content-between align-items-center">
            <a href="#" class="btn btn-link text-primary p-0 text-decoration-none">了解更多</a>
            <a href="#" class="btn btn-primary rounded-pill px-4">立即行动</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

代码说明：

• card-img-extended类让图片宽度为110%，并通过margin-left: -5%实现左右对称溢出。
• rounded-4、shadow-sm、border-0这些Bootstrap工具类快速匹配参考图的卡片样式。
• 内容区域用d-flex实现按钮的左右布局，和参考图的交互元素位置一致。

如果要让图片向上溢出，给图片添加mt-n3类即可，同时可调整卡片的pt值适配布局。

内容的提问来源于stack exchange，提问作者Ujang Aripin