Why are Internet Explorer Images HUGE?

Ok, I’m really nerding out on this one and most of my readers won’t care about Internet Explorer images, but for the few do-it-yourself bloggers that might otherwise spend hours searching for a solution, I offer this. (Plus I’ll know where to find the solution next time I forget.)

First, Internet Explorer sucks. Let’s get that out of the way.

Why are Internet Explorer images HUGE? Why won’t they resize?

I just finished a web site that looked lovely in Chrome. But Internet Explorer images were so big they ran out of the content area.

internet explorer images hugeIsn’t that lovely?

I Googled solutions for an hour before I finally found what I thought might fix the Internet Explorer image problem and manged to fix it, but let me make this easy for you.

Internet Explorer doesn’t like the “auto” tag, which is used with lots of templates on WordPress and, in my case, a Rockettheme.com Joomla template. So where my CSS stylesheet said:

img {
max-width: 100%;
width: auto \9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
And Chrome and Firefox said, “Oh sure, that makes perfect sense!” Internet Explorer images said, “Uh… duh… I give up, I’m just going to make these images their REAL upload size and TOTALLY IGNORE anything you might have done to shrink that photo down on that particular page, like using height=”300” or dragging it to another sizes or whatever. Can I pet the rabbit now? “
Brilliant, IE.


  1. View the site in Chrome.
  2. Right click on the image that Internet Explorer is using to piss you off (even though it looks fine here) and choose “Inspect Element” from the pop up menu.
  3. That will open up a box at the bottom of your screen. On the right, you’ll see all the snippets of CSS code attached to that element (the photo). You’ll also see WHERE it is pulling that code from. In the case of my Rocket Theme Joomla template, it was in bootstrap.css found in the css directory of my template.
  4. FTP in and get that file and edit it or edit it through an online CSS editor you might have on your site’s template manager. If you can, you might want to make a backup first just in case.
  5. Remove the lines with width and height bits that say “auto.”
  6. Save.
  7. Viola! Internet Explorer images now look just fine.

Hope that helps someone!





Amy Vansant
Latest posts by Amy Vansant (see all)

3 Responses

    • Kelly Selman

      Thank you so much I have been trying for weeks to fix this problem


  1. Alan Cole

    Hi Amy!

    Six years later I see this post and BINGO!

    X-Theme has Width and Max Width parameters. I had Width on a new page set to – wait for it – Auto, and the image exploded in IE11. Reading your post, I changed it to 100% and the lame IE11 was happy. I’m not sure who uses it these days, but one or two might. I check pages for worst-case in IE. They fixed Edge, which I don’t think many use after they switch their default back to Chrome or Firefox, but the fix never flowed into IE11.

    Thanks again for enlightening us all based on your head-banging!

    Alan Cole



Leave a Reply

Your email address will not be published.

SEO Powered By SEOPressor