html - 图片溢出div建议

我确定这确实很容易，但是我已经研究了一段时间，而我的大脑却一片空白。我有一个div，然后在其中有一个图像。该图像似乎刚刚溢出了div边界，并令我发疯。我在下面有一张图片，向您展示CSS的情况。

#avatar {
  float: left;
  width: 50%;
  height: 300px;
  border: 1px solid black;
}

#avatar img {
  width: 100%;
  height: auto;
}

<div id="avatar">
<img src="http://i.imgur.com/dkzoNCc.png"></div>

我在主要div #avatar上有一个边框，以便可以看到div的整个大小。我想要的只是将图像缩放到div的大小。如果我将高度设置为100％，它会很好地进入div，但是在调整其大小时，它会开始溢出div。我希望图像调整宽度而不是高度。

我在这里错过了一些非常简单的事情吗？我不想使用隐藏在图像上的溢出，因为我相信这只会减少一些溢出。

谢谢大家

最佳答案

在css下面尝试img。

使用height: 100%;获得最大高度

居中的display: block;margin: auto;

max-width: 100%;以适合大图像

请检查带有大图和小图的示例。

#avatar {
  float: left;
  width: 50%;
  height: 300px;
  border: 1px solid black;
}
#avatar img {
height: 100%;
max-width: 100%;
display: block;
margin: auto;
}

<div id="avatar">
  <img src="http://www.baraodasfestas.com.br/Assets/Produtos/SuperZoom/0431_MICKEY_635703672330071491.jpg" alt="">
</div>
<div id="avatar">
  <img src="https://upload.wikimedia.org/wikipedia/en/d/d4/Mickey_Mouse.png" alt="">
</div>