如何在Bootstrap卡片组中配置图片，保持质量一致且不拉伸？

问题场景与代码 #

我在使用Bootstrap的card-group容器展示电商产品数组（JSON对象），代码如下：

<div class="card-group">
        <% products.forEach((product) => { %>
        <div class="card mb-3" style="max-width: 540px">
          <div class="row g-0">
            <div class="col-md-4">
              <img
                src="/uploads/<%= product.image %>"
                class="img-fluid rounded-start"
                style="height: 12rem; width: 100%"
              />
            </div>
            <div class="col-md-8">
              <div class="card-body">
                <h5 class="card-title"><%= product.name %></h5>
                <p class="card-text"><%= product.description %></p>
                <a href="#" class="btn btn-primary">
                  <small class="text-body-secondary">View More</small></a
                >
              </div>
            </div>
          </div>
        </div>
        <% }) %>
      </div>

当前遇到的问题：

• 图片尺寸各异时，如何保证图片不拉伸、质量不受损，同时保持所有图片对齐？
• 之前尝试设置width: 100%;height: auto;，但导致图片上下不对齐；想让图片居中显示以保持布局一致性，不知如何实现。

解决方案技巧 #

技巧1：Flex容器+object-fit属性（推荐） #

通过给图片容器设置固定高度和Flex布局实现居中，配合object-fit保证图片比例不变：

1. 给图片所在的col-md-4容器添加固定高度，同时用Flex布局实现图片水平垂直居中
2. 给图片设置width: 100%; height: 100%;，并添加object-fit属性控制图片显示方式

修改后的核心代码：

<div class="col-md-4" style="height: 12rem; display: flex; align-items: center; justify-content: center;">
  <img
    src="/uploads/<%= product.image %>"
    class="img-fluid rounded-start"
    style="width: 100%; height: 100%; object-fit: cover;"
  />
</div>

• object-fit: cover：图片按比例填充容器，超出部分裁剪，保证不变形且填满容器
• object-fit: contain：图片完整显示，保持比例，在容器内居中，剩余空间留空（适合不想裁剪图片的场景）

技巧2：使用Bootstrap内置类简化代码 #

利用Bootstrap的d-flex、align-items-center、justify-content-center类替代行内样式，让代码更简洁：

<div class="col-md-4 d-flex align-items-center justify-content-center" style="height: 12rem;">
  <img
    src="/uploads/<%= product.image %>"
    class="img-fluid rounded-start"
    style="width: 100%; height: 100%; object-fit: cover;"
  />
</div>

技巧3：提前统一图片尺寸（后端/上传环节） #

在图片上传时，用图片处理工具（如Sharp、ImageMagick）将所有产品图片统一裁剪/缩放为相同尺寸（比如300px×400px），前端直接使用即可完全对齐，避免前端样式处理的兼容性问题，同时优化加载性能。

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