Html 引导映像响应在IE上出错

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

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

它在Chrome和Firefox上运行得非常好，但当我在InternetExplorer9上测试它时，图像会放大，甚至超过图像本身的大小。当我在IE（F12）上使用调试模式并取消勾选

宽度：100%设置在
.img responsive
下，它将恢复正常

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

.img-responsive {width: auto;}

与Bootstrap中的
max width
语句结合使用，应该可以解决这个问题。还请注意，Bootstrap v3.2.1还原了导致问题的提交

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



为我工作
我想出了一个有趣的解决办法。在将100%宽度添加到img responsive和img thumbnail类后，您会看到较小的图像会被放大，因此我提出了一点jQuery，以确保每个图像的最大宽度不会超过自然宽度。确保它处于窗口加载状态，而不是文档就绪状态，以便在加载图像之前不会运行


$（窗口）.on（'load'，function（））{
$（'.img responsive，.img缩略图'）。每个（函数（）{
//获取图像的自然宽度：
var imgWidth=$（this.prop（'naturalWidth'）；
//将每个图像的最大宽度css规则设置为其自然宽度：
$（this.css（'max-width'，imgWidth）；
});
});

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

简单地用
img流体替换
img responsive
，使用Bootstrap 3.3.7对我来说很有效

IE-Grrr。
我通过应用“hack”暂时解决了这个问题，我从bootstrap.css中的.img responsive中删除了“width:100%”，但我认为这不是一个好的解决方案。谁有更好的解决方案？IE真是糟透了。这是一个bug，他们正在下一个版本中修复：在引导后将其添加到css中。img responsive{width:auto}另外，您应该将width:100%添加回您删除它的位置，这是确保您的响应图像填充其容器所必需的。然后添加@Christina suggestion@JoeConlin-这个100%\9不应该在img响应类中，它是为了涵盖它在svg图像上的使用，但它在IE中表现糟糕，它在3.2.1中被删除。不要把它放回去。即使它可以工作，btn block类也只能用于按钮。我认为将该类分配给映像会令人困惑。很好的快速修复方法——如果您在站点上使用bootstrap的默认类名（而不是语义类和mixin），我认为您真的不需要担心这个糟糕的语义欢迎使用StackOverflow！请考虑对代码添加一点解释。谢谢。这会迫使图像超出其原始大小，这通常是不可取的。
<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>