电商热销区CSS Grid布局：如何让图片等高且不拉伸？

嘿，我之前做电商项目的时候也碰到过这个头疼的问题！想要Grid布局下的商品图片等高又不拉伸，其实只要调整一下object-fit的用法，再配合容器控制就搞定了，给你两个亲测有效的方案：

方案1：固定容器高度 + object-fit: cover（最直接易上手） #

你之前尝试设置固定高度导致图片拉伸，是因为没配合object-fit: cover属性。这个属性可以让图片保持原有比例，同时填满整个容器，多余的部分会被裁剪掉，完美解决拉伸问题。

修改后的CSS： #

// BEST SELLERS
.bestSeller1 { grid-area: bestSeller1; }
.bestSeller2 { grid-area: bestSeller2; }
.bestSeller3 { grid-area: bestSeller3; }
.bestSeller4 { grid-area: bestSeller4; }
.bestSellers {
  display: grid;
  grid-template-areas: "bestSeller1 bestSeller2 bestSeller3 bestSeller4";
  h2 {
    text-align: center;
    font-size: 2.5rem;
  }
}
.bestSeller {
  /* 给图片加个容器来固定高度，避免直接给img设置高度可能出现的问题 */
  .img-wrapper {
    height: 550px;
    overflow: hidden;
  }
  img{
    width: 100%;
    height: 100%;
    object-fit: cover; /* 核心：保持比例填充容器 */
    object-position: center; /* 可选：调整图片裁剪的焦点，默认居中，也可以设top/left等 */
  }
}
.checked { color: #FF6200 }

对应的HTML调整（给图片包裹容器）： #

<!-- BEST SELLERS -->
<div class="container">
  <div class="bestSellers">
    <h2>Best Sellers</h2>
    <div class="bestSeller bestSeller1">
      <div class="img-wrapper">
        <img src="assets/product-1.jpg" alt="Red T-Shirt">
      </div>
      <p>Red T-Shirt</p>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
      <span class="fa fa-star checked"></span>
    </div>
    <!-- 其他3个商品卡片同理添加img-wrapper容器 -->
  </div>
</div>

方案2：使用aspect-ratio + Grid自动等高（更灵活适配） #

如果不想固定死图片高度，想让Grid根据内容自动调整行高，同时保证图片比例一致，可以用aspect-ratio属性，搭配Flex布局让卡片内部元素对齐：

修改后的CSS： #

// BEST SELLERS
.bestSellers {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 用repeat替代繁琐的grid-template-areas，更简洁 */
  gap: 1.5rem; /* 给卡片之间添加间距，提升视觉体验 */
  h2 {
    grid-column: 1 / -1; /* 让标题占满Grid整行 */
    text-align: center;
    font-size: 2.5rem;
  }
}
.bestSeller {
  display: flex;
  flex-direction: column; /* 让卡片内部元素垂直排列 */
}
.bestSeller img {
  width: 100%;
  aspect-ratio: 4/5; /* 根据你的商品图比例设置，比如4:5的竖版图 */
  object-fit: cover;
  object-position: center;
  flex-shrink: 0; /* 防止图片被压缩变形 */
}
.bestSeller p {
  flex-grow: 1; /* 让文字区域自动填充剩余空间，保证星级位置对齐 */
  margin: 1rem 0;
}
.checked { color: #FF6200 }

这个方案不需要固定高度，Grid会自动让每行的卡片高度保持一致，aspect-ratio确保图片比例统一，同时object-fit: cover避免拉伸。

为什么你之前的object-fit: contain没用？ #

contain属性是让图片完整显示在容器内，所以如果图片比例和容器不一致，就会出现空白边，导致卡片高度参差不齐。而cover是让图片覆盖整个容器，裁剪掉多余部分，这样既能保证容器高度统一，又不会让图片变形。

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