html - 图像在 Chrome/Firefox 和 Safari 中显示不同

Question

我一直在试验 CSS Grid 并组合了一个在 Chrome 和 Firefox 中都可以的布局，但是当我在 Safari 中尝试时，图像被压扁了，尤其是当屏幕尺寸缩小时。我在这里做了一个代码笔:

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

(请注意，在 codepen 的编辑器 View 中，Safari 图像会正确呈现，但它们不会在 Safari 浏览器或全屏 View 中正确呈现)

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