图像的 CSS 高度属性 [重复]

【问题标题】：CSS Height Property of an Image [duplicate]图像的 CSS 高度属性 [重复]
【发布时间】：2017-09-06 08:52:08
【问题描述】：

下面的图片 CSS 属性 wrt 高度有什么不同吗？

height: auto; 

height: 100%;

【问题讨论】：

标签： css

【解决方案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>

【讨论】：