如何使图像停留在CSS网格容器的行内？

您已将图像设置为height: 100%。但是100％是什么？100％的容器？100％的视口？100％的行？如果是这样，那行的高度是多少？

Chrome和Firefox对您的意图进行了有根据的猜测。他们已经实施了旨在超出规范指导范围的算法，以改善用户体验。他们称这些修改为“干预”。

Safari不会这样做。Safari严格遵守规范语言，该规范语言规定元素上的百分比高度必须在父元素上具有定义的高度，否则将被忽略。

然后，您必须考虑默认情况下网格项不能小于其内容。如果将行设置为1fr，但是图像比分配的空间高，则行必须扩展。您可以使用min-height: 0/ min-width: 0或overflow使用除以外的其他任何值来覆盖此行为visible。

尽管如此，一旦您考虑了以上指南，您可能可以结合使用grid和flex属性使布局在Safari中工作：

* {  box-sizing: border-box;}body {  display: flex;  flex-direction: column;  height: 100vh;  margin: 0;  background-color: lightgrey;}header,footer {  flex: 0 0 100px;  background-color: tomato;  display: flex;  align-items: center;  justify-content: center;}.container {  flex: 1;  min-height: 0;  display: grid;  grid-template-columns: 1fr 1fr;  grid-auto-rows: auto;  padding: 3px;}.tile {  display: flex;  flex-direction: column;  justify-content: center;  min-height: 0;}img {  max-width: 100%;  max-height: 100%;  object-fit: contain;  padding: 3px;}<header>HEADER</header><!-- The image is 200 x 100 px: a green and a blue square next to each other. --><div >  <div >    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />  </div>  <div >    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />  </div>  <div >    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />  </div>  <div >    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />  </div>  <div >    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />  </div>  <div >    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />  </div></div><footer>FOOTER</footer>