Question

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

#1

.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) & 考虑到图像的纵横比。

#2

.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% 什么？

Answer 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>

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

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

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

1 个答案: