图像溢出 div 建议答案

【问题标题】：Image overflowing div advice图像溢出 div 建议
【发布时间】：2017-01-09 01:20:18
【问题描述】：

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

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

谢谢大家

【问题讨论】：

#avatar img { width: 100%; height: 100%; }怎么样
因为你的#avatar img { height: auto; }改成#avatar img { height: 100%; }

标签： html css

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

【讨论】：

这似乎做得很完美！非常感谢所有的帮助。我知道它最终会变得很简单。似乎只是缺少“最大宽度”:-)

【解决方案2】：

只需添加：

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

【讨论】：

没问题@rufus

【解决方案3】：

因为你的height:auto 换成了<img>

只需使用：

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

但这会拉伸你的形象。因此，如果您想要容器内的全尺寸图像，则需要拉伸容器。喜欢

#avatar 
{
  float: left;
  display: inline-block;
  width: 50%;
  height: auto;
  border: 1px solid black;
}

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

【讨论】：

【解决方案4】：

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

#avatar img {
  /*width: 100%;*/
  height: auto;
  max-width: 100%;
  height:100%;
}

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

【讨论】：