2

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: https://stackoverflow.com/a/31445364/6453726

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

Community
  • 1
  • 1
guizo
  • 2,594
  • 19
  • 26
  • 2
    Because your image is an inline element, [read](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – slashsharp Aug 01 '16 at 04:05
  • Thank you. I woudn't had understood what was happening if I just added display: block to the img. – guizo Aug 01 '16 at 07:15

1 Answers1

1

Add display:block; to your img selector

img {
    max-height: 100%;
    max-width: 100%;
    display: block;
}
partypete25
  • 4,353
  • 1
  • 17
  • 16