如何使用Bootstrap使图像比卡片大但仍在卡片内？

Question

如何使用 Bootstrap 5.3.3 和网站上的 HTML 制作如下图所示的卡片

Answer 1

可以用position:relative设置div的高度，让图片高度大于div和position:absolute；那么你可以让图像比div（卡片）大

示例：

div { width: 250px; height: 100px; border: 2px solid #333; border-radius:10px; position: relative; padding-left: 120px;}
div img { position: absolute; width: 100px; height: 120px; left: -2px; top: -20px; border-radius: 10px;}

<div>
  <h3>Title</h3>
  <h4>Subtitle</h4>
  <img src="https://picsum.photos/seed/picsum/536/354" alt="image">
</div>