Bootstrap Image Responsive messed up on IE

问题:

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.

回答1:

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

回答2:

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.

回答3:

.img-responsive{
 width:100%
 max-width:100%
}

worked for me

回答4:

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

回答5:

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>

回答6:

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

IE - Grrr.