Img 超出了父 Div答案

【问题标题】：Img Extends Beyond Parent DivImg 超出了父 Div
【发布时间】：2014-09-06 19:24:59
【问题描述】：

我正在使用 bootstrap 3 为我的博客开发一个自定义主题，并且大部分都可以使用，但是在我的帖子中，我遇到了一个问题，即我的图像超出了右侧边栏的主要内容区域！

我正在使用 <div class="span8"> 用于主要内容，<div class="span4"> 用于侧边栏。在我的样式表中我添加了...

.span8 img {
    max-width: 100% !important;
    height: auto;
}

但这似乎不起作用！我还查看了图片部分下的 getbootstrap.com 网站，但那里也没有任何内容！

如果您想查看该网站，请告诉我，我将非常乐意提供链接！非常感谢！

【问题讨论】：

尝试将问题缩小到代码中的特定区域并将其粘贴到您的问题中，也可以尝试使用像 bootply.com/new 这样的代码粘贴服务，以便您可以重现问题并粘贴另外它进入你的问题......
对网站的主要内容使用引导启动类，例如：row、col-sm-X 等（X 在 1-12 范围内；但取决于您的目标屏幕）；也努力学习the examples。但一般来说，首先尝试构建一个很好的例子来说明你的问题，比如@webeno 提到的，然后发布它； JSfiddle 是一个好的开始。
@Egel spanX 是 Bootstrap 2 的命名约定，所以我假设 OP 正在使用它，col-sm-X 是 Bootstrap 3 ...至于粘贴代码，bootply.com/new 可能是在这种情况下确实是最好的，因为您不必处理包括引导相关的 css 和 js...
是的@webeno，你完全正确（我什至不知道这个网站的存在；谢谢）但主要问题是在工作示例中显示问题。
@webeno 除了他说他在问题中使用的是 Bootstrap 3。这可能是问题所在。 Phillip，您是否正在尝试将 Bootstrap 2 代码与 Bootstrap 3 一起使用？

【解决方案1】：

改为：-

.span8 img {
    max-width: 100% !important;
    height: auto;
    width: auto;
}

这是一个浏览器问题，在某些情况下它会起作用，但其他人需要宽度：自动

【讨论】：

【解决方案2】：

Bootstrap 提供了一个 img-responsive 类，您可以将其应用于您的图像。

<img src="#" class="img-responsive" />

这会将max-width: 100%; 和height: auto; 应用于图像，以便它很好地缩放到父元素。

【讨论】：

是的，注意到引导网站上的亨利！我得到了数千张图片！不过，您上面的 Barry 提供的答案效果很好！
这就是img-responsive 的问题。此外，如果您使用 Barry 的解决方案，它会添加额外的标记。
是的，奇怪的是，我使用了 barrys 解决方案，它在 chrome 中运行良好，但在 FF 和 IE 中，即使在刷新 dns 和更改 ip addys 之后它仍然在做同样的事情！
style.css 是在 bootstrap.min.css 之前还是之后加载的？不确定这在这种情况下是否重要，但请尝试确保 style.css 最后加载。
是的，你这么认为！我的样式 css 在根文件中，而不是在引导文件夹中！