Comments on: Setting Maximum Width For Image In IE6, IE7 & Firefox

By: max-width and IE6 « Expression Web Tips

max-width and IE6 « Expression Web Tips — Fri, 23 Oct 2009 17:10:34 +0000

[...] Setting Maximum Width For Image In IE6, IE7 & Firefox ~ Mattias Geniar [...]

By: Brian

Brian — Thu, 01 Oct 2009 19:15:54 +0000

This
my_img {
max-width: 500px;
/* Resize the image for IE6 */
width: expression(this.width > 500 ? 500: true);
}
The code above is simple CSS, that will work for all major browsers to set a maximum width for an image (in this case: 500px).

All you need to do now is set the class on your image:

There are, of course, alternatives as well. You could call a javascript function that will determine the width of your image, and resize accordingly. Here’s the function.

function resizePhoto() {
if (document.getElementById(‘photo_id’)) {
photo = document.getElementById(‘photo_id’);

if (photo.width > 500) {
photo.width = 500;
}
}
}

Is a great piece of code it saved my bacon. I display images uploaded by users. I create a resized one on upload with php so that the thumbs page loads fast But save the orign. for single display. I needed to display at full size up to a limit so small ones were not stretched and big ones did not get to big. This code did the trick Thanks a lot.

By: Dennis

Dennis — Tue, 14 Apr 2009 04:21:32 +0000

Your solution is really great!!!
It helped me a lot!!

By: Orlando

Orlando — Tue, 07 Apr 2009 20:39:42 +0000

You can avoid guessing when the image has been loaded puting the call to the function in the window load event:

window.onload = function(){
resizePhoto();
}

By: Christina

Christina — Sun, 07 Sep 2008 20:40:08 +0000

Your blog helped me fix my width problem, however, the css is even simpler than you described it:
it is not necessary to set a class on the photos, just to style the img tag
img { max-width: 500px; /* Resize the image for IE6 */ width: expression(this.width > 500 ? 500: true); }
This will resize EVERY image on the page, so if that is not desired, class it is.

/Christina