Preventing A Height Change When Adding A Border With Box-sizing

I'm unable to find something that describes this issue, but if I'm missing it, just let me know. Below is a demo (Tested in IE11 and Chrome) which shows the problem perfectly Essen

Solution 1:

You can set add line-height:0px if there is no text for .div as image is inline-block element it add whitespace

div {
  width: 200px;
  float: left;
  margin-right: 3px;
}
div img {
  max-width: 100%;
  max-height: 100%;
}
.div {
  border: 3px dotted blue;
  box-sizing: border-box;
  line-height:0px;
}

<div id="div1">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div">
  <img src="http://placehold.it/200x200" alt="" />
</div>
<div class="div" style="clear:left">
  <img src="http://placehold.it/200x200" alt="" />
</div>

Solution 2:

Here is a variant of solution:

div {
    width:200px;
    float:left;
    margin-right:3px;
    box-sizing:border-box;
}
.div img {
    max-width:100%;
    max-height:100%;
    box-sizing: border-box;
    border:3px dotted blue;
}

Solution 3:

Either add the line-height attribute to the div as @Vitorino suggested or add vertical-align: middle to the img. Both will fix the whitespace issue for an inline-block

div img {
  max-width: 100%;
  max-height: 100%;
  vertical-align: middle;
}
.div {
  border: 3px dotted blue;
  box-sizing: border-box;
  line-height:0px;
}