Question

我一直在使用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）上使用调试模式并取消width:100%;下的.img-responsive设置时，它会恢复正常。

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

Answer 1

将此添加到替换样式表：

.img-responsive {width: auto;}

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

Github discussion for bug #13996

Answer 2

嘿，我知道这是一个古老的问题但是如果有人仍然在寻找这个问题的答案，只需添加课程＆＃34; btn-block＆＃34;你的HTML。

＆＃13;

<script src="example.js" type="text/babel"></script>

＆＃13;

希望它能提供帮助。

Answer 3

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

为我工作

Answer 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);
	});
});

Answer 5

对于Bootstrap 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>

Answer 6

使用Bootstrap 3.3.7只需用img-responsive替换img-fluid就可以了。

IE-Grrr。

Bootstrap Image Responsive搞砸了IE

6 个答案: