title: Bootstrap Image Responsive messed up on IE
body: <p>I had been developing my website using Bootstrap and basically, I have this structure..</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;img src="~/Content/Theme/img/image.png" class="img-responsive" style="margin: 0 auto;" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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 <code>width:100%;</code> setting under <code>.img-responsive</code>, it returns to normal.</p>
  
  <p>How should I resolve this? I've already tried a few solution on here including adding <code>.col-sm-12</code> to the image, but it still doesn't fix it on IE.</p>