Bootstrap Image Responsive搞砸了IE

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

这与max-widthBootstrap中的语句一起应该解决问题.另请注意,Bootstrap v3.2.1还原了导致该问题的提交.

Answer 2

嘿,我知道这是一个老问题但是如果有人仍然在寻找这个问题的答案,只需在你的HTML中添加"btn-block"类.

<img src="your-image-path" class="img-responsive btn-block>

希望它会有所帮助.