画像のCSS高さプロパティ

Question

次の画像CSSプロパティの高さに違いはありますか？

height: auto; 

height: 100%; 

Answer 1

height: auto画像はゆがみなしに元のサイズに拡大できますが、親要素と重複する可能性があります。縮小またはそれの高さに合わせて、画像の高さを伸ばします

height: 100%は親

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>

です