guizo guizo - 4 months ago 8
CSS Question

Image resizes to max-height but page overflows

I have a

img
that resizes to the footer height (10vh) with
max-height: 100%
. In Dev tools the size of each element seems to be OK but somehow the page is overflowing and I can`t figure out where the extra px height comes from.
Here is my code:


* {
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>





Why does this happen and how can I avoid it?

UPDATE: I had no idea that the default
display: inline
of
<img>
was causing this. Now that I know it is much easier to find other answers to my question (I just didn`t know what to search for). For those who may be searching for this issue and find my question here is a complete answer: http://stackoverflow.com/a/31445364/6453726

SOLUTION: Add
vertical-align: top
to the
<img>
.

Answer

Add display:block; to your img selector

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