Bootstrap卡片里的图片怎么总是变形？

Mc.文博提问于 2026-03-22 20:55:22 阅读 4

组件

我用Bootstrap的Card组件放了一张产品图，但图片在不同屏幕下老是被拉伸变形，看着特别难受。明明原图是正方形的，结果在手机上变成宽屏了。

我试过直接用 <img src="..."> 放在card里，也加过 class="card-img-top"，但还是不行。是不是还要加别的类？

这是我的代码：

<div class="card" style="width: 18rem;">
  <img src="product.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">商品名称</h5>
    <p class="card-text">这是一段描述...</p>
  </div>
</div>

有没有办法让图片保持原始比例，又不超出卡片宽度？

我来解答赞 3 收藏

反馈

1 条解答

Zz翌菡 Lv1

最简单的办法是给图片加个样式，让它按比例缩放。直接在img标签上加style="object-fit: cover;"或者用CSS类来设置这个属性就行。

2026-03-22 21:00