Menu
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.
844
To make an image responsive, you need to give a new value to its width property. Then the height of the image will adjust itself automatically. The important thing to know is that you should always use relative units for the width property like percentage, rather than absolute ones like pixels.
Images in Bootstrap are made responsive with .img-fluid . max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts.
Responsive images will automatically adjust to fit the size of the screen.
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
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
