垂直图像大于父div

Question

所以我检查了其他帖子，但没有答案帮助我。所以我在div里面有一个图像。我把div的特定高度/宽度大小显示为div的比例，并且里面的图像更高，所以它总是超出div。

我想让图像变小，使其垂直与div一样高，宽度会相应调整。任何人都可以帮忙??

<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
  <div>
    <img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="width: 100%;" />
  </div>
</div>

Answer 1

试试这个：

<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
  <img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;">
</div>

Answer 2

额外的div也阻止了img使用其父级的css属性。这是不必要的。 http://jsfiddle.net/2q94nfq6/1/

<div class="intro-pic" style="height: 343px; ; width: 614px; overflow: hidden
;">
    <img src="http://i.imgur.com/IMDdLW9.png" title="user engagement" style="height: 100%;width: 100%;" />
</div>

Answer 3

如果要以像素为单位定义div，则应在样式下使用 css 的最大宽度属性。 max-width属性用于设置给定元素的最大宽度。