我有一个img
是调整大小以页脚高度(10vh)与max-height: 100%
。在开发工具的每个元件的尺寸似乎是确定的,但不知何故页面四溢,我不能老是揣摩出额外的像素高度从何而来。 这里是我的代码: 图像大小调整到最大高度,但页面溢出
* {
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
是造成这一点。现在,我知道这是很容易找到其他的答案我的问题(我只知道didn`t要搜索的内容)。对于那些可能正在寻找这个问题,并在这里找到我的问题是一个完整的答案:https://stackoverflow.com/a/31445364/6453726
SOLUTION:将vertical-align: top
添加到<img>
。
因为你的图像是内嵌元素,[读](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra- space-below-the-image) – slashsharp
谢谢。如果我只是将display:block添加到img,我就不知道发生了什么。 – guizo