如何在固定尺寸div中根据图片数量自动调整图片大小？

方案一：纯CSS实现（需现代浏览器支持） #

利用CSS的:has选择器检测容器内的图片数量，结合Grid布局实现自适应：

/* 固定尺寸的容器 */
.image-container {
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #eee;
}

/* 单张图片铺满容器 */
.image-container img:only-child {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持比例并铺满，多余部分裁剪；也可改用contain完整显示 */
}

/* 容器内有5或6张图片时的布局 */
.image-container:has(img:nth-child(5)),
.image-container:has(img:nth-child(6)) {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px; /* 图片间的间隙，可按需调整 */
}

.image-container:has(img:nth-child(5)) img,
.image-container:has(img:nth-child(6)) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5张图片时优化最后一张的布局（跨两列） */
.image-container:has(img:nth-child(5)):not(:has(img:nth-child(6))) img:nth-child(5) {
  grid-column: span 2;
}

注意：:has选择器仅支持Chrome 105+、Firefox 121+等现代浏览器，若需兼容旧版浏览器，建议使用方案二。

方案二：JS+CSS实现（兼容性更好） #

通过JS统计容器内的图片数量，给容器添加对应类名，再用CSS设置样式：

JS代码：

// 遍历所有图片容器
document.querySelectorAll('.image-container').forEach(container => {
  const imgCount = container.querySelectorAll('img').length;
  // 先移除旧类名
  container.classList.remove('single-img', 'five-six-imgs');
  // 根据数量添加对应类名
  if (imgCount === 1) {
    container.classList.add('single-img');
  } else if (imgCount >= 5 && imgCount <= 6) {
    container.classList.add('five-six-imgs');
  }
});

// 若图片是动态加载的，需在图片加载完成后重新执行上述逻辑

CSS代码：

.image-container {
  width: 400px;
  height: 300px;
  overflow: hidden;
  border: 1px solid #eee;
}

/* 单张图片样式 */
.image-container.single-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5-6张图片的布局 */
.image-container.five-six-imgs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2px;
}

.image-container.five-six-imgs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 5张图片时的布局优化 */
.image-container.five-six-imgs img:nth-child(5):last-child {
  grid-column: span 2;
}

补充说明 #

• object-fit属性可根据需求调整：cover保持比例铺满容器（裁剪多余），contain完整显示图片（可能留空白），fill拉伸图片填满容器（可能变形）。
• 容器的固定尺寸可根据实际需求修改width和height值。

内容的提问来源于stack exchange，提问作者Om Shri Hari