twitter-bootstrap Bootstrap 图像响应在 IE 上搞砸了
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26512388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Image Responsive messed up on IE
提问by InnovativeDan
I had been developing my website using Bootstrap and basically, I have this structure..
我一直在使用 Bootstrap 开发我的网站，基本上，我有这个结构..
<div class="container">
<img src="~/Content/Theme/img/image.png" class="img-responsive" style="margin: 0 auto;" />
</div>
It works perfectly on Chrome and Firefox but when I test it on Internet Explorer 9, the image becomes enlarged, even beyond the image size itself. when I used debug mode on IE (F12) and untick the width:100%;setting under .img-responsive, it returns to normal.
它在 Chrome 和 Firefox 上完美运行，但当我在 Internet Explorer 9 上测试时，图像会放大，甚至超出图像本身的大小。当我在 IE 上使用调试模式 (F12) 并取消勾选 下的width:100%;设置时.img-responsive，它恢复正常。
How should I resolve this? I've already tried a few solution on here including adding .col-sm-12to the image, but it still doesn't fix it on IE.
我应该如何解决这个问题？我已经在这里尝试了一些解决方案，包括添加.col-sm-12到图像，但它仍然没有在 IE 上修复它。
回答by isherwood
Add this to your overrides stylesheet:
将此添加到您的覆盖样式表中：
.img-responsive {width: auto;}
That, in conjunction with the max-widthstatement in Bootstrap, should resolve the issue. Also note that Bootstrap v3.2.1 reverted the commit that caused the issue.
结合max-widthBootstrap 中的语句，应该可以解决问题。另请注意，Bootstrap v3.2.1 恢复了导致问题的提交。
回答by Peter
Hey i know it's an old question but in case someone is still looking for answers at this problem just add the class "btn-block" to your html.
嘿，我知道这是一个老问题，但如果有人仍在寻找这个问题的答案，只需将“btn-block”类添加到您的 html。
<img src="your-image-path" class="img-responsive btn-block>Hope it'll help.
希望它会有所帮助。
回答by mitra
.img-responsive{
width:100%
max-width:100%
}
worked for me
对我来说有效
回答by zel777
Here's an interesting fix I came up with. After adding 100% width to your img-responsive and img-thumbnail classes, you'll see that smaller images get blown out of proportion, so I came up with this little bit of jQuery to make sure that the max-width of each image doesn't exceed the natural width. Make sure it's on window load and NOT on document ready so it doesn't run until the images are loaded.
这是我想出的一个有趣的修复方法。在为 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);
});
});回答by SiD quakers
For Bootstrap 4
对于 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>
回答by Umber Ferrule
Simply replacing img-responsivewith img-fluidworked for me using Bootstrap 3.3.7.
简单地更换img-responsive与img-fluid使用引导3.3.7对我来说有效。
IE - Grrr.
IE - Grrr。
