网格布局中图片缩放异常：为何需为img显式设置尺寸？

我要做一个包含方形图片的简单Grid布局，但直接把img作为Grid子元素时布局失效——图片尺寸过大、互相重叠。初始代码如下：

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

img {
  aspect-ratio: 1 / 1;
  background-color: orange;
  object-fit: contain;
}

<div class="grid">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
  <img src="https://placehold.co/1920x1080">
</div>

给img设置width: 100%和height: 100%后布局恢复正常，但我想了解背后的原因，还有没有其他处理网格内图片尺寸的方式，以及为什么Grid已经定义规则，仍需为图片设置显式尺寸？

为什么需要显式设置图片尺寸？ #

Grid容器的列规则（grid-template-columns: repeat(auto-fit, minmax(400px, 1fr))）确实定义了网格项的可用空间，但图片是替换元素，默认会以自身原始尺寸渲染，不会自动填充网格项的空间。你设置的aspect-ratio:1/1只是约束了图片的宽高比例，但没有限制它的整体大小——如果原始图片尺寸远大于网格项的宽度，图片还是会撑破网格，导致重叠。

当你给img设置width:100%和height:100%时，相当于强制图片占满网格项的可用空间，再配合aspect-ratio和object-fit:contain，就能让图片在保持方形比例的同时，自适应网格项的大小。

其他处理网格内图片尺寸的方式 #

除了直接给img设宽高100%，还有几种替代方案：

• 给图片套一层容器
  把img放在div（或其他块级元素）里，让这个容器作为Grid子元素，容器会自动填充网格空间，再给img设置width:100%或max-width:100%：

  .grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  .grid-item {
    aspect-ratio: 1/1;
    background-color: orange;
  }
  .grid-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  

  <div class="grid">
    <div class="grid-item"><img src="https://placehold.co/1920x1080"></div>
    <!-- 其他图片容器 -->
  </div>
  

• 使用max-width:100%和max-height:100%
  不需要设100%的宽高，而是用max属性限制图片最大不超过网格项的空间，同时配合aspect-ratio：

  img {
    aspect-ratio: 1/1;
    background-color: orange;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
  }
  

  这种方式适合图片原始尺寸小于网格项的情况，不会把小图拉伸变形。

• 利用Grid的对齐属性配合max尺寸
  给图片设置max-width:100%; max-height:100%，再用Grid的对齐属性让图片在网格项中居中：

  .grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  img {
    aspect-ratio: 1/1;
    background-color: orange;
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    justify-self: center;
    align-self: center;
  }
  

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