html - 图片溢出div建议

Question

我确信这真的很简单，但我已经研究了一段时间这个问题，但我的大脑一片空白。我有一个 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。我希望图像根据宽度而不是高度调整大小。

我在这里错过了一些非常简单的东西吗？我不想使用隐藏在图像上的溢出，因为我相信这只会切断其中的一部分。

谢谢大家

Answer 1

为 img 尝试下面的 css。

• 使用height: 100%;作为最大高度
• display: block;margin: auto; 居中<​​/li>
• 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>