图像溢出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

只需添加：

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

Answer 2

这是因为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%;
}

Answer 3

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

在img下尝试以下css。

• 使用height: 100%;获取最大身高
• display: block;margin: auto;用于居中
• max-width: 100%;适合大图片

请查看包含大图和小图像的示例。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;