CSS-Height-Eigenschaft eines Bildes

Question

Gibt es einen Unterschied in der folgenden Abbildung CSS-Eigenschaften in Höhe?

height: auto; 

height: 100%; 

Answer 1

height: auto wird das Bild wachsen lassen, um es ohne Verzerrung Originalgröße, sondern kann das übergeordnete Element überlappen.

height: 100% wird schrumpfen oder die Bildhöhe strecken die Höhe der es passend ist Mutter

height: auto 
 
<div style="height: 100px; border: 2px solid red;"> 
 
    <img src="http://via.placeholder.com/350x150" style="height: auto"> 
 
</div> 
 

 
<br><br><br><br> 
 
height: 100% 
 
<div style="height: 100px;; border: 2px solid yellow;"> 
 
    <img src="http://via.placeholder.com/350x150" style="height: 100%"> 
 
</div>