我有一個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