图像在 Chrome/Firefox 和 Safari 中的显示方式不同

Question

我一直在尝试使用 CSS Grid 并整理出一个在 Chrome 和 Firefox 中还可以的布局，但是当我在 Safari 中尝试时，图像会被挤压，尤其是当屏幕尺寸缩小时。我在这里做了一个代码笔：

https://codepen.io/jwolfe890/full/NzxjMx/

（请注意，在 codepen 的编辑器视图中，Safari 图像会正确呈现，但在 Safari 浏览器或全屏视图中无法正确呈现）

正如您在 Safari 中看到的那样，图像看起来像：

而在 Chrome/Firefox 其他浏览器中它看起来像：

我在 css 中使用了 min-height 和 max-height，这可能会在浏览器之间呈现不同的图像。如何跨浏览器实现一致的图像渲染？

CSS 文件：

body {
    box-sizing: border-box;
}

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: 5px;
    max-width: 100%;
}

img {
    max-height: 100%;
    max-width: 100%;
}

h1 {
    text-align: center;
    font-size: 60px;
}

img:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    height: 100%;
}

img:nth-child(4) {
    grid-column: span 2;
}

Answer 1

删除第一张图片的高度 100% 改进了发布，但仍然存在轻微差异，因为图片现在稍微没有填满网格轨迹：

img:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    height: 100%; <--- REMOVED THIS
}

但是，为什么高度 100% 会在不同浏览器之间呈现不同的图像，这让我仍然感到困惑。