如何让缩放图片网格高度匹配其div同级元素？

我来帮你搞定这个问题！你想要让3×3的图片网格和旁边的.data div高度完全一致，又不想硬编码高度，其实核心是利用Flexbox的拉伸特性，再配合Grid布局分配行高，就能完美解决。

问题根源 #

你现有的代码里，.wrapper用了Flex布局，这一步是对的，但.img-grid只定义了列的分布，却没有设置行的高度规则。这就导致网格的行高会被图片本身的尺寸撑开，没办法自动匹配同级.data的高度，全屏时这个问题就会明显暴露出来。

解决方案 #

只需要对CSS做两处关键修改：

1. 给.img-grid添加行的分配规则，让三行平分网格的可用高度
2. 优化图片的显示方式，避免拉伸变形

修改后的完整CSS代码如下：

.wrapper {
  display: flex;
  /* 可选：如果需要两个子项之间有间距，可以添加 */
  gap: 1rem;
}

.data table {
  border-collapse: collapse;
}

.data table td {
  border: 1px solid #000;
  height: 100%;
}

.img-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* 新增：让3行平分网格高度 */
  grid-template-rows: repeat(3, 1fr);
  height: 100%;
  /* 可选：图片之间加小间距 */
  gap: 4px;
}

img {
  width: 100%;
  height: 100%;
  /* 保持图片比例填充容器，避免变形，可根据需求换成contain */
  object-fit: cover;
}

对应的HTML可以保持不变，建议给图片添加alt属性来提升页面可访问性。

原理说明 #

• Flex容器.wrapper的默认对齐方式是align-items: stretch，这会让两个子项.data和.img-grid自动拉伸到相同高度
• grid-template-rows: repeat(3, 1fr)让网格的三行平均分配.img-grid的高度，这样每个图片单元格的高度都是网格总高度的1/3
• object-fit: cover确保图片按比例填充单元格，不会被强行拉伸变形，如果你希望完整显示图片内容，可以换成object-fit: contain

扩展适配 #

如果以后图片数量变化（比如改成2×4的网格），只需要调整Grid的行列参数就行，比如：

.img-grid {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

这样不管网格的行列数怎么变，都能自动匹配同级元素的高度，完全不需要硬编码像素值~

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