In the past days on a new project I discovered that IE doesn’t wanted to resize images even if the HTML tag img has a valid width value and a valid height value on the corresponded attributes, I mean, not in a css property or rule, but a value on the attributes: width and height. I have detected this issue only on IE 7/8/9/10, all works perfect on FF, Chrome, Safari and even Opera.

Here is the HTML of the image:

<img title="" alt="" src="img.png" width="430" height="344" border="0" />

And as I mentioned before, on FF the image is displayed as expected:

And here is how it looks on IE 10:

The solution I found was to add the same width and height values but now in the equivalent css properties, so, the final code now looks like:

<img style="width: 430px; height: 344px;" title="" alt="" src="img.png" width="430" height="344" border="0" />

Now, IE 7/8/9/10 shows the image as the rest of the browsers:

Errata

The previous solution doesn’t works on IE 7, sorry, but exist another approach that works on IE 7+ and its very similar to my previous solution. In our scenario, the image has an immediate div parent and all that I needed to do was to add the same width and height values of the image but now in the equivalent css properties of the div, we use the div to control the position of the image, so, adding the width and height values of the image on the div doesn’t affect our layout.

If you aren´t worry about IE 7, then my original solutions work for IE8+, but, if you need to target all IE version as in on my case, this second approach is a solution you can use.

Now, our code looks like:

<div style="width: 430px; height: 344px;">
   <img title="" alt="" src="img.png" width="430" height="344" border="0" />
</div>

I really hope you find this information useful.