It seems simple, by using the “max-width” propery through CSS, however; IE6 doesn’t support it.
Here’s a simple “hack” to get it working, by using expressions (in javascript-like syntax) in CSS, that IE6 does support.
.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:
<img class="my_img" src="my-image.jpg" alt="" />
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; } } }
And at the bottom of your page, you could activate it by:
<script type="text/javascript"> resizePhoto(); </script>
Again, this has a downside. Javascript can only resize your image, if it was loaded at the time you called the resizePhoto() function. You could solve this by preloading your images in javascript, or by using setTimeout() to call the same function a few seconds later (when you “guess” the image has loaded by then).
<script type="text/javascript"> resizePhoto(); setTimeout(resizePhoto, 3000); setTimeout(resizePhoto, 6000); setTimeout(resizePhoto, 9000); </script>
This’ll try to resize the image right away, after 3 seconds, 6 and 9 seconds. If the image is already resized, these functions won’t do anything any more – so we can safely call them after eachother.
The CSS style is probably the “cleanest”, and should be preferred. If for some reason you can’t use this, know that there are a ton of alternatives to be used – including javascript. You could also use the GDLibrary in PHP to analyze the image, and add the necessary “width=’500′ ” tags if the image exceeds certain sizes.
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
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();
}
Your solution is really great!!!
It helped me a lot!!
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.
Pingback: max-width and IE6 « Expression Web Tips