Boot image

Question

I designed my site 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 great on Chrome and Firefox, but when I test it in Internet Explorer 9, the image gets zoomed, even outside the size of the image itself. when I used debug mode in IE (F12) and turned off the width:100%; parameter width:100%; in .img-responsive , it returns to normal.

How do I resolve this? I have already tried several solutions here, including adding .col-sm-12 to the image, but it still does not fix it in IE.

Answer 1

Add this to the override stylesheet:

 .img-responsive {width: auto;} 

This, due to the max-width operator in Bootstrap, should solve the problem. Also note that Bootstrap v3.2.1 returned a commit that caused the problem.

Github talk for bug # 13996

Answer 2

Hey, I know this is an old question, but if someone is still looking for answers to this problem, just add the "btn-block" class to your html.

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

Hope this helps.

Answer 3

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

worked for me

Answer 4

Here is an interesting solution that I came across. After adding 100% width to your img-responsive and img-thumbnail classes, you will see that smaller images get out of hand, so I came up with this little jQuery to make sure that the maximum width of each image does not exceed the natural width. Make sure that the load on the window and NOT on the document are ready so that it does not start before loading the images.

 $(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 natural width: $(this).css('max-width', imgWidth); }); }); 

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

Answer 6

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

IE - Grrr.