这个网格容器的高度是如何计算的？答案

【问题标题】：How is the height of this grid-container being calculated?这个网格容器的高度是如何计算的？
【发布时间】：2021-04-27 12:38:51
【问题描述】：

#2中.footer的高度是如何计算的？

.footer {
}

img {
  width: 100%;
}

<div class="footer">
<img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image">
</div>

在此示例中，页脚的高度通过以下方式计算：初始包含块的宽度 (html) 并考虑到图像的纵横比。

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  -ms-grid-rows: 100%;
      grid-template-rows: 100%;
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

我了解每张图片的宽度约为页脚宽度的三分之一。什么决定了页脚的高度？我有一种感觉，图像的内在尺寸与它有关，但两个图像都没有放大到它的纵横比。 img 的 height 设置为 100%。 100% 什么？

【问题讨论】：

默认情况下，网格内的图像将contain。作用与object-fit: contain; 相同，表示它们将占据整个宽度并自动调整高度而不改变图像的大小比例。

标签： html css css-grid

【解决方案1】：

首先，让我们摆脱一些属性以具有以下内容：

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  /* height: 100%; */
  width: 100%;
  outline:1px solid red;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

您有一个宽度等于 100vw 的页脚，分为 3 个相等的列（所以每个列在 33.33vw 左右）。每张图片将在每列内为width:100%，并且它们将保持它们的比例。从逻辑上讲，这将定义页脚的高度和单行的高度。由于我们正在处理 CSS 网格，因此同一行内的所有列将具有相同的高度，这个高度是这里的关键，也是在图像中添加 height:100% 时用作参考的高度：

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* grid-template-rows: 100%;*/
  margin: 0 auto;
}

img {
  height: 100%;
  width: 100%;
  outline:1px solid red;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

换句话说，内容被用来定义我们列的高度，这个高度后来被认为是我们百分比高度的参考。请注意，grid-template-rows: 100% 在这里毫无用处，并且不会做任何事情，因为我们没有参考来解决该百分比。仅当您在网格上定义明确的高度时，它才会生效：

.footer {
  font-size: 15px;
  line-height: 1.2em;
  width: 100vw;
  background-color: #090B19;
  color: white;
}

.footer .icons {
  display: grid;
  
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100%;
  margin: 0 auto;
  height: 200px;
}

img {
  height: 100%;
  width: 100%;
  outline:1px solid red;
}

<div class="footer">
  <div class="icons">
    <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
    <a href="https://stackoverflow.com/users/14037283/tonitone120?tab=summary" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="so-image"></a>
    <a href="www.google.com" target="_blank"><img src="https://media.istockphoto.com/photos/whole-kiwi-fruit-and-half-kiwi-fruit-on-white-picture-id834807852?k=6&m=834807852&s=612x612&w=0&h=qyouQR9CrIlrPo8FG72PCt1eBV_lTVtnuwVlo9hWZY8=" class="linked-image"></a>
  </div>
</div>

调整上面示例的屏幕大小，您会注意到网格、行和 3 列的高度将等于200px，因为我们明确定义了该高度，这与第一种情况不同，它由内容。

另一个不直观的例子，我们将有一个图像来定义高度，并将其高度作为基于其自身高度的百分比！

.icons {
  display: grid;
  margin: 0 auto;
  width:80%;
  border:2px solid
}

img {
  height: 150%;
  display:block;
  width: 100%;
  outline: 1px solid red;
}

<div class="icons">
  <a href="www.google.com" target="_blank"><img src="https://www.applesfromny.com/wp-content/uploads/2020/05/Jonagold_NYAS-Apples2.png" class="github-img"></a>
</div>

注意图像将如何溢出精确50%，这是150% 和100% 之间的差异，如果我们没有设置高度，100% 是图像的高度。

类似例子的相关问题：Why is my Grid element's height not being calculated correctly?

【讨论】：