我有一个 img
用 max-height: 100%
调整到页脚高度 (10vh) .在 Dev 工具中,每个元素的大小似乎都不错,但不知何故页面溢出了,我无法弄清楚额外的 px 高度从何而来。
这是我的代码:
* {
margin: 0 !important;
padding: 0 !important;
}
body {
background-color: yellow;
}
.header {
height: 10vh;
background-color: red;
}
.content {
height: 80vh;
background-color: green;
}
.footer {
height: 10vh;
background-color: blue;
}
img {
max-height: 100%;
max-width: 100%;
}
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
<img src="https://pixabay.com/static/uploads/photo/2016/01/19/18/00/city-1150026_960_720.jpg" alt="" />
</div>
为什么会发生这种情况,我该如何避免?
更新:我不知道默认的 display: inline
的 <img>
造成了这个。现在我知道找到我的问题的其他答案要容易得多(我只是不知道要搜索什么)。对于那些可能正在搜索此问题并在此处找到我的问题的人来说,这是一个完整的答案:https://stackoverflow.com/a/31445364/6453726
解决方案:添加 vertical-align: top
到 <img>
.
最佳答案
将 display:block;
添加到您的 img
选择器
img {
max-height: 100%;
max-width: 100%;
display: block;
}
关于html - 图像调整到最大高度但页面溢出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38690744/