15

I had been developing my website using Bootstrap and basically, I have this structure..

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

How should I resolve this? I've already tried a few solution on here including adding .col-sm-12 to the image, but it still doesn't fix it on IE.

Zeeshan Adil
  • 1,937
  • 5
  • 23
  • 42
InnovativeDan
  • 1,067
  • 2
  • 8
  • 10
  • I temporarily resolved it by applying a "hack", I removed "width:100%" from .img-responsive in bootstrap.css, but I don't think this is a good solution. Anyone have a better solution? IE seriously suck.. – InnovativeDan Oct 22 '14 at 16:35
  • 3
    It's a bug, they are fixing in next version: https://github.com/twbs/bootstrap/issues/13996 – Christina Oct 22 '14 at 16:43
  • add this to your css after the bootstrap. .img-responsive {width: auto} – Christina Oct 22 '14 at 16:46
  • Also, you should add width: 100% back in from where you removed it it's needed to ensure your responsive images fill their container. Then add in @Christina suggestion. – Joe Conlin Oct 22 '14 at 17:50
  • 1
    @JoeConlin - this 100%\9 is not supposed to be in the img-responsive class it's to cover the use of it on svg images but it behaves badly with IE, its been removed in 3.2.1. Don't put it back. – Christina Oct 22 '14 at 18:30
  • @Christina Sorry, my mistake. You are correct. – Joe Conlin Oct 22 '14 at 19:25

6 Answers6

9

Add this to your overrides stylesheet:

.img-responsive {width: auto;}

That, in conjunction with the max-width statement in Bootstrap, should resolve the issue. Also note that Bootstrap v3.2.1 reverted the commit that caused the issue.

Github discussion for bug #13996

isherwood
  • 58,414
  • 16
  • 114
  • 157
7

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.

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

Hope it'll help.

Peter
  • 71
  • 1
  • 1
  • 1
    Even though it works, the btn-block class is meant to be used on buttons only. I think it would be confusing to assign that class to an image. – Dan H Apr 25 '16 at 14:40
  • 1
    Good quick-fix -- if you're using bootstrap's default classnames on your site (instead of semantic classes & mixins) I don't think you really need to worry about the poor semantics of this – JKirchartz Nov 30 '16 at 17:03
2
.img-responsive{
 width:100%
 max-width:100%
}

worked for me

wogsland
  • 9,106
  • 19
  • 57
  • 93
mitra
  • 29
  • 2
0

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.

$(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);
 });
});
zel777
  • 1
  • 2
0

For 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>
SiD quakers
  • 63
  • 1
  • 4
0

Simply replacing img-responsive with img-fluid worked for me using Bootstrap 3.3.7.

IE - Grrr.

Umber Ferrule
  • 3,358
  • 6
  • 35
  • 38