Question

So i have the following code on my img’s

width:100%; height: auto;

However IE6 being infamous for conforming to web-standards seems to ignore the aspect ratio, it adds a default aspect ratio onto the image and makes them look hidious, it stretches them and squashes them in some instances it loads them correctly but it’s not consistent.

The html looks like this

<div 100% width of window>
     <div 100% with some margin>
          <img that looks great in IE (yeah right..) />
     </div>
</div>

An image that is supposed to be 1140px by 392px is displayed at 1140px by 1303px

Width seems to be correct but the height is getting distorted.

Do you know of a fix?

I understand that IE6 is on the way-out but with some countries in the world with over 28% of usage and corporations it is still important to support it in some instances.

Answer 1

#yourImgage {
    width:100%; height: auto;
}

it stretches them and squashes them in some instances it loads them
correctly but it’s not consistent.

Your code above is not telling the image to be 100% of itself, but rather 100% of it’s container’s width. If that’s what you want, then fine. Otherwise, by stretching, it sounds like IE is just doing what it’s told albeit that it seems to be confused about what to do with height:auto… preserve the image’s aspect ratio or keep it’s original pixel height while stretching its width.

So have you tried leaving out height entirely? It seems to behave the same in other browsers, perhaps it will eliminate IE 6’s confusion…

#yourImgage {
    width:100%;
}

What are you trying to achieve here?

---

EDIT:

Perhaps you’ll need to maintain a conditional stylesheet just for IE 6. All other browsers will ignore this.

<!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="ie6-only.css" />       
<![endif]-->