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

Question

下面的代码显示了在Chrome 60和Firefox 55中调整窗口大小时的预期行为（但在iOS Safari 10.3中没有；这很可能是另一个问题，为什么它在Safari中行为不当）。

html, body {

  width: 100%;

  height: 100%;

  padding: 0;

  margin: 0;

  border: 0;

  background-color: lightgrey;

}



.container {

  box-sizing: border-box;

  width: 100%;

  display: grid;

  grid-template-columns: 1fr 1fr;

  grid-template-rows: repeat(3, calc((60vh - 12px)/3));

  /*grid-template-rows: 1fr 1fr 1fr;*/

  /*grid-template-rows: auto auto auto;*/

  height: 60vh;

  border: 3px solid yellow;

  padding: 3px;

  /*grid-gap: 20px;*/ /* <-- would also mess things up */

}



.tile {

}



img {

  box-sizing: border-box;

  display: block;

  object-fit: contain;

  width: 100%;

  height: 100%;

  margin: 0;

  border: 0;

  padding: 3px;

}


 <!-- The image is 200 x 100 px: a green and a blue square next to each other. -->

 <div class="container">

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

   <div class="tile">

     <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

   </div>

 </div>

被保留。我本来期望：

grid-template-rows: 1fr 1fr 1fr;

or:

grid-template-rows: auto auto auto;

使图像适合网格的行，但它们都不行。带有：

grid-template-rows: repeat(3, calc((60vh - 12px)/3));

我得到期望的行为。如何避免自己计算数学？换句话说，我应该怎么做才能使grid-template-rows: 1fr 1fr 1fr;（或类似的东西）起作用？

在实际页面上用CSS计算容器元素的高度已经很困难。目标是通过CSS网格布局解决该问题；没有JavaScript，也没有背景图片骇客。

更新：我最初排除了背景图片骇客的原因有两个。

1. 我认为（由于一些误解）背景图像url必须在CSS文件中，但事实并非如此：我可以使用内联样式并将其包含在HTML中。

2. 感觉有点黑。在看到嵌套的弹性容器嵌套在网格容器中以使其能够在Safari上运行之后，它变得多么复杂和混乱之后，我简单地诉诸于背景图像黑客，因为它明显更干净并且可以在所有经过测试的浏览器（Chrome，Firefox，苹果浏览器）。

最后，不是解决问题的公认答案。

Answer 1

您已将图像设置为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 class="container">

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

  <div class="tile">

    <img src="https://i.stack.imgur.com/qbpIG.png" alt="." />

  </div>

</div>

<footer>FOOTER</footer>