Bootstrap Image Responsive 在 IE 上搞砸了答案

【问题标题】：Bootstrap Image Responsive messed up on IEBootstrap Image Responsive 在 IE 上搞砸了
【发布时间】：2019-03-28 02:13:42
【问题描述】：

我一直在使用 Bootstrap 开发我的网站，基本上，我有这个结构..

<div class="container">
    <img src="~/Content/Theme/img/image.png" class="img-responsive" style="margin: 0 auto;" />
</div>

它在 Chrome 和 Firefox 上完美运行，但是当我在 Internet Explorer 9 上测试它时，图像变大了，甚至超出了图像本身的大小。当我在IE（F12）上使用调试模式并取消勾选.img-responsive下的width:100%;设置时，它恢复正常。

我应该如何解决这个问题？我已经在这里尝试了一些解决方案，包括将.col-sm-12 添加到图像中，但它仍然无法在 IE 上修复它。

【问题讨论】：

我通过应用“hack”暂时解决了这个问题，我从 bootstrap.css 中的 .img-responsive 中删除了“width:100%”，但我认为这不是一个好的解决方案。有人有更好的解决方案吗？ IE 真的很烂..
这是一个错误，他们将在下一个版本中修复：github.com/twbs/bootstrap/issues/13996
在引导后将其添加到您的 css 中。 .img 响应式 {width: auto}
另外，您应该添加 width: 100% 从删除它的位置返回，以确保您的响应式图像填充其容器。然后添加@Christina 建议。
@JoeConlin - 这个 100%\9 不应该在 img-responsive 类中，它是为了覆盖它在 svg 图像上的使用，但它在 IE 中表现不佳，它在 3.2 中被删除。 1.不要放回去。

标签： html css twitter-bootstrap internet-explorer responsive-design

【解决方案1】：

将此添加到您的覆盖样式表中：

.img-responsive {width: auto;}

结合 Bootstrap 中的 max-width 语句，应该可以解决问题。另请注意，Bootstrap v3.2.1 恢复了导致问题的提交。

Github discussion for bug #13996

【讨论】：

【解决方案2】：

嘿，我知道这是一个老问题，但如果有人仍在寻找这个问题的答案，只需将“btn-block”类添加到您的 html 中。

&lt;img src="your-image-path" class="img-responsive btn-block&gt;

希望对你有所帮助。

【讨论】：

即使它有效，btn-block 类也只能用于按钮。我认为将该类分配给图像会令人困惑。
很好的快速修复——如果你在你的网站上使用引导程序的默认类名（而不是语义类和混合）我认为你真的不需要担心这个糟糕的语义

【解决方案3】：

.img-responsive{
 width:100%
 max-width:100%
}

为我工作

【讨论】：

欢迎来到 StackOverflow！请考虑为您的代码添加一些解释。谢谢。
这将迫使图像超出其原始尺寸，这通常是不可取的。

【解决方案4】：

这是我想出的一个有趣的解决方法。在为您的 img-responsive 和 img-thumbnail 类添加 100% 宽度后，您会看到较小的图像变得不成比例，所以我想出了一点 jQuery 来确保每个图像的最大宽度不超过自然宽度。确保它处于窗口加载状态而不是文档就绪状态，以便在加载图像之前它不会运行。

$(window).on('load', function(){
	$('.img-responsive, .img-thumbnail').each(function() {
		// get the natural width of the image:
		var imgWidth = $(this).prop('naturalWidth');
		// set the max-width css rule of each image to it's natural width:
		$(this).css('max-width', imgWidth);
	});
});

【讨论】：

【解决方案5】：

对于引导程序 4

<div class="row>
   <div class="col-lg-3">
       <div class="p-4">
           <div style="width: auto; max-width: 100%; height: auto;">
               <img class="img-fluid" scr="/image.jpg">
           </div>
       </div>
   </div>
</div>

【讨论】：

【解决方案6】：

使用 Bootstrap 3.3.7 只需将 img-responsive 替换为 img-fluid 即可。

IE - Grrr.

【讨论】：