html - 图像调整到最大高度但页面溢出

Question

我有一个 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> .

Answer 1

将 display:block; 添加到您的 img 选择器

img {
    max-height: 100%;
    max-width: 100%;
    display: block;
}