这是我在一个卡组div里面。我正在使用bootstrap预构建组件。Products是购物商店的产品的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>

字符串
问题是，如果显示的图像大小不同，是否有任何技术/技巧来保持所有图像的质量（而不拉伸图像）。
我尝试过使用height和width属性，例如：

width: 100%;
height: auto;

型
但随后图像变得不对齐，如Misaligned images所示：
另一种可能性我可以做的是中心的图像在死中心，以便prodivde一些一致性，但我也不知道如何做到这一点。