图像大小调整为最大高度但页面溢出

Question

我有一个img，它使用max-height: 100% 调整到页脚高度（10vh）。在开发工具中，每个元素的大小似乎还可以，但不知何故页面溢出了，我无法弄清楚额外的 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>

为什么会发生这种情况，我该如何避免？

更新：我不知道<img> 的默认display: inline 导致了这种情况。现在我知道找到我的问题的其他答案要容易得多（我只是不知道要搜索什么）。对于那些可能正在搜索此问题并在此处找到我的问题的人，这是一个完整的答案：https://stackoverflow.com/a/31445364/6453726

解决方案：将vertical-align: top 添加到<img>。

Answer 1

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

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