带有img的简单div中的额外高度像素

Question

I am having difficulty determining where the extra pixels of height are coming from for the div in this simple layout. My expectation would be that the image would determine the height of the div but instead it appears to be a few pixels larger. The pixels I am trying to get rid of are shown in blue. Any ideas?

Oh, I have added a button to explicitly set the height of the image parent div properly using javascript - my question is really where is it getting that extra height from in the first place, or how can I do this without javascript?

 function change() { var image = document.getElementById('image1ID'); var width = image.naturalWidth; var height = image.naturalHeight; var imageDIV = document.getElementById('image1DIV'); imageDIV.style.height = (100 * height / width) + "px"; } 

 <div id="image1DIV" style="background-color:#00f;"> <img id="image1ID" style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg"> </div> <button onclick="change()">change height of parent div</button> 

Answer 1

Add vertical-align:middle to your img tag. It removes extra space.

 function change() { var image = document.getElementById('image1ID'); var width = image.naturalWidth; var height = image.naturalHeight; var imageDIV = document.getElementById('image1DIV'); imageDIV.style.height = (100 * height / width) + "px"; } 

 #image1ID { vertical-align: middle; } 

 <div id="image1DIV" style="background-color:#00f;"> <img id="image1ID" style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg"> </div> <button onclick="change()">change height of parent div</button> 

Answer 2

the img tag height is not explicitly set to occupy 100% height of its parent. What you are seeing are parts of background color styled on the parent

.flexrow img{
      height:100%;
    }

Snippet below

 .flexrow { display: flex; flex-direction: row; flex-wrap: none; } .flexcolumn { display: flex; flex-direction: column; justify-content: center; align-items: center; } .textblock { width: 170px; } .flexrow img { height: 100%; } 

 <div class="flexcolumn"> <div class="flexrow"> <div style="background-color:#00f;"> <img style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg"> </div> <div class="flexcolumn textblock" style="background-color:#eee;"> <div style="background-color:#e0e;">Title is here</div> <div style="background-color:#0ee;">Description is here</div> </div> </div> <div class="flexrow"> <div style="background-color:#0f0;"> <img style="width:100px;" src="http://www.imageno.com/thumbs/20170330/73dlz3sr4pfy.jpg"> </div> <div class="flexcolumn textblock" style="background-color:#ee0;"> <div style="background-color:#e0e;">Title is here</div> <div style="background-color:#0ee;">Description is here</div> </div> </div> </div>