图片溢出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。我希望图像根据宽度而不是高度调整大小。

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

感谢大家

原文由 rufus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

试试下面的 img 的 css。

• 使用 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>

原文由 Felix A J 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

只需添加：

 #avatar img {
  max-width: 100%;
}

原文由 Krešimir Galić 发布，翻译遵循 CC BY-SA 3.0 许可协议