图像在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％会在浏览器中呈现不同的图像。