/    Sign up×
Community /Pin to ProfileBookmark

IE8 max-width problems for img resize

Copy linkTweet thisAlerts:
Jun 01.2009

I’ve just finished a site (only my second in total) and I feel it’s pretty robust and has been tested on most browsers and platforms.

However, I have found a problem that only occurs in IE8, and I cant work out why.

I’m using max-width and max-height to resize images (it’s a photographer portfolio site, so there are quite a few images), as they are of varying dimensions these selectors easily make images fit on my page.
However, in IE8 it doesn’t seem to keep the scale of the image correct. Resulting in portrait images being too wide and landscape images too high.

To see the problem look at this page: [url]http://tiny.cc/mfssn[/url] in IE8.
The weird thing is that the photo on my home page seems to be resized correctly.

Anyone know why this is happening?

Thanks…

to post a comment
CSS

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@itaylorMar 10.2010 — I have the same issue, and can't find anywhere else on the net describing it. I needed a fix for it, so I started playing with it myself, and found a fix that works consistently. If you use Javascript to remove the width and height attributes that IE automatically adds for you (it is "helping" you) the images will get resized properly again.

Here's a test page that has an repro case and an example of the fix.

http://nfine.net/bugs/ie8bug.html

You may have to reload the page, as the bug seems to only occur when the image is already in your browser's cache.

I hope this saves someone else the pain of having to figure this out for themselves. I'll try to report the issue to Microsoft, although I'd doubt it gets fixed before IE 9...
×

Success!

Help @foolishtiger spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...