html - 如何使图像保留在 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="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
 </div>

重要的是图像的宽高比 (2:1)

被保留。我会期望:

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

或:

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. 感觉很老套。在看到它变得多么复杂和困惑之后 将嵌套的 flex 容器嵌套在网格容器中只是为了让它在 Safari 上工作，我只是求助于背景图像 hack，因为它显着更干净并且在所有测试的浏览器(Chrome，Firefox，Safari)中工作.

最后，不是公认的答案帮助解决了我的问题。

Answer 1

您可以使用 grid-template-rows: 1fr 1fr 1fr 更重要的是您必须重新设置 min-width 和 min-height 默认为 auto(与内容一样多)的 grid items 的值。

To provide a more reasonable default minimum size for grid items, this specification defines that the auto value of min-width/min-height also applies an automatic minimum size in the specified axis to grid items whose overflow is visible and which span at least one track whose min track sizing function is auto. (The effect is analogous to the automatic minimum size imposed on flex items.)

Source: W3C

这类似于带有 flexboxes 的 auto flex item 规则。请参阅下面的演示，我将它们重置为零:

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: 1fr 1fr 1fr;
  height: 60vh;
  border: 3px solid yellow;
  padding: 3px;
  /*grid-gap: 20px;*/ /* <-- would also mess things up */
}

.tile {
  min-width: 0;
  min-height: 0;
}

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="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
   <div class="tile">
     <img src="/image/qbpIG.png" alt="." />
   </div>
 </div>