图像的CSS高度属性

Question

以下图片CSS属性与高度有什么不同？

height: auto; 

height: 100%;

Answer 1

height: auto将允许图像增长到原始尺寸，不会失真，但可能与父元素重叠。

height: 100%会缩小或拉伸图像高度以匹配其父级的高度

＆＃13;

＆＃13;

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>

＆＃13;

＆＃13;

＆＃13;