Safari网格布局图片高度过度拉伸问题排查与解决求助

问题根源 #

Safari对网格布局中百分比高度元素的计算存在兼容性缺陷：当你给图片设置height: 100%时，它不会正确继承网格单元格的高度，反而会以图片自身的原始尺寸为基准撑开网格行，导致高度溢出——即使给父元素加max-height也无法解决，因为此时网格行的高度已经被图片的固有尺寸主导，max-height没有有效的参考基准。

修复方案 #

方案一：修正网格对齐逻辑并约束图片容器

通过调整网格的对齐方式，让单元格自动跟随左侧内容高度，同时给图片容器添加布局约束，确保图片正确填充容器：

.parent {
  max-width: 1500px;
  margin: auto;
}

.container {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 20px;
  align-items: stretch; /* 替换center为stretch，让单元格填满行高 */
}

.left {
  grid-column: span 3 / span 3;
}

.right {
  grid-column: span 2 / span 2;
  height: 100%; /* 强制容器占满单元格高度 */
  display: flex; /* 用flex布局让图片自动填充容器 */
}

img {
  max-width: 100%;
  width: 100%;
  object-fit: cover;
}

方案二：打破Safari的高度计算限制

给图片容器添加min-height: 0，强制Safari忽略内容的固有尺寸，跟随网格行的高度计算：

.parent {
  max-width: 1500px;
  margin: auto;
}

.container {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 20px;
  align-items: center;
}

.left {
  grid-column: span 3 / span 3;
}

.right {
  grid-column: span 2 / span 2;
  min-height: 0; /* 强制单元格跟随行高 */
}

img {
  height: 100%;
  max-width: 100%;
  object-fit: cover;
  min-height: 0; /* 确保图片不会溢出容器 */
}

方案三：改用Flex布局替代网格

如果网格的兼容性问题难以调试，改用Flex布局同样能实现等高两栏效果，且在Safari中表现更稳定：

.parent {
  max-width: 1500px;
  margin: auto;
}

.container {
  display: flex;
  gap: 20px;
}

.left {
  flex: 3; /* 对应原网格的3列比例 */
}

.right {
  flex: 2; /* 对应原网格的2列比例 */
  display: flex;
}

img {
  width: 100%;
  object-fit: cover;
}

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