Höhe der div ist größer als das Bild

Question

Ich bin ein Anfänger für Front-End-Entwicklung. Vor kurzem schrieb ich Codes wie:

<div style="background-color:red"> 
 
     <img src='https://www.logaster.com/blog/wp-content/uploads/2013/06/jpg.png'> 
 
</div>

Die Höhe des Bildes (logo.jpg) ist 80px, aber die Höhe des div ist 82px. Warum?

Answer 1

Sie Bild wie ein Block zeigen kann, das zu beheben,

<div> 
    <img style="display:block" src='logo.jpg'> 
</div> 

Answer 2

<div style="height:your height; width:your witdh;"> 

<img src='logo.jpg'> 

</div> 

Um die Höhe oder Breite zu ändern, können Sie tun, was ich oben mit Inline-Stil getan habe. oder geben Sie dem Div eine Klasse oder geben Sie ihm eine ID und stylen Sie es in einem externen Stylesheet.

Answer 3

Sie müssen richtige CSS schreiben, um dies zu erreichen.

<div class="wrap"> 
    <div class="box1"> 
    <img src="http://www.placekitten.com/500/500"> 
    </div> 
</div> 

.box1 { 
width:auto; 
height: auto; 
max-width: 600px; 
max-height: 300px; 
background-color:chocolate; 
padding:5px; 
display: inline-block; 
} 
.box1 img { 
vertical-align: top; 
max-width: inherit; 
max-height: inherit; 
} 
.wrap { 
border: 1px dotted gray; 
margin: 1.00em 0; 
text-align: center; 
} 

JsFiddle: https://jsfiddle.net/nikdtu/75nu1a4m/