#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% 什么?
答案 0 :(得分:0)
首先,让我们去掉一些属性以获得以下内容:
.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?