CSS Height Property of an Image

Question

Is there any difference in the following image CSS properties wrt height?

height: auto; 

height: 100%;

Answer 1

height: auto will allow the image to grow to it's original size with no distortion but may overlap the parent element.

height: 100% will shrink or stretch the image height to match the height of it's parent

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>