如何在CSS Grid布局中适配不同尺寸的图片

我拥有多张尺寸不同的图片，希望将它们适配到现有div容器中，同时保持当前的CSS Grid布局结构。请问是否需要固定宽高？应使用哪些CSS属性来实现？
注：仅需CSS解决方案。

现有代码 #

CSS

* {
  box-sizing: border-box;
}

.grid {
  columns: 18rem;
  gap: 1rem;
  counter-reset: grid;
}

.item + .item {
  margin-top: 1rem;
}

.item {
  break-inside: avoid;
  aspect-ratio: 4 / 3;
  background: pink;
  padding: 1rem;
  border-radius: 0.75rem;
}

.item::before {
  counter-increment: grid;
  content: counter(grid);
}

.item:nth-child(3n) {
  aspect-ratio: 1;
  background: lavender;
}

.item:nth-child(3n - 1) {
  aspect-ratio: 2 / 3;
  background: lightblue;
}

HTML

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

不需要固定具体宽高数值——你的布局已经通过columns: 18rem定义了列宽，配合aspect-ratio属性维持了容器的比例，只要让图片适配这些容器即可。

你需要用到这些CSS属性来实现图片适配：

• position: relative：给.item设置，作为图片的定位父容器
• position: absolute + top: 0; left: 0; width: 100%; height: 100%;：让图片完全填满父容器
• object-fit: cover：保持图片原有比例，裁剪超出容器的部分（如果不想裁剪，可改用object-fit: contain，但容器会出现空白区域）
• border-radius: inherit：让图片继承容器的圆角样式，避免溢出

修改后的完整代码 #

CSS

* {
  box-sizing: border-box;
}

.grid {
  columns: 18rem;
  gap: 1rem;
  counter-reset: grid;
}

.item + .item {
  margin-top: 1rem;
}

.item {
  break-inside: avoid;
  aspect-ratio: 4 / 3;
  background: pink;
  padding: 0; /* 移除内边距，避免图片与容器间隙 */
  border-radius: 0.75rem;
  position: relative; /* 添加相对定位 */
  overflow: hidden; /* 确保裁剪内容不溢出 */
}

.item img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例填充容器 */
  border-radius: inherit; /* 继承圆角 */
}

.item::before {
  counter-increment: grid;
  content: counter(grid);
  position: relative; /* 让计数器文字显示在图片上方 */
  z-index: 1;
  padding: 1rem;
  color: #fff;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}

.item:nth-child(3n) {
  aspect-ratio: 1;
  background: lavender;
}

.item:nth-child(3n - 1) {
  aspect-ratio: 2 / 3;
  background: lightblue;
}

HTML

<div class="grid">
  <div class="item"><img src="你的图片地址1" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址2" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址3" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址4" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址5" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址6" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址7" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址8" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址9" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址10" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址11" alt="图片描述"></div>
  <div class="item"><img src="你的图片地址12" alt="图片描述"></div>
</div>

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