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;
}

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

1 个答案: