Card卡片里的图片为啥显示不全？

夏沫 Dev 提问于 2026-03-14 02:28:24 阅读 5

组件

我用Bootstrap写了个Card组件，但里面的图片总是被裁掉一部分，只显示中间区域。明明图片路径是对的，也设置了宽高，但就是不完整显示，有点懵。

试过加object-fit: contain，也试过把img标签单独包一层，都没用。是不是Card的样式有啥隐藏的限制？

<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>

Card卡片数据展示

我来解答赞 0 收藏

反馈

1 条解答

码农梓玥 Lv1

这问题很常见，Bootstrap的card-img-top默认就是object-fit: cover，图片会被裁剪填充容器。

改一下img的样式就行：

.card-img-top {

  width: 100%;

  height: 200px; /* 固定高度 */

  object-fit: contain; /* 完整显示，不裁剪 */

  object-position: top; /* 可选，显示顶部区域 */

}

或者直接内联样式：

<img src="product.jpg" class="card-img-top" alt="..." 

     style="width: 100%; height: 200px; object-fit: contain;">

你之前说试过object-fit: contain没用，大概率是因为没同时固定height。cover是裁剪填充，contain是完整显示但可能留白，两者都得配合明确的高度才生效。

如果不想留白，就用cover然后接受裁剪，这是正常的业务场景。

2026-03-14 03:00