Resize user uploaded images to a maximum screen width

[Yinan]

Hi all.

I have a bunch of images i want to display, but some of them are much larger than the screen (more than 2000 pixel in width and height). Now i want to resize those with css (because i can't do that with photoshop or anything because they are uploaded by other users) to a maximum width equal to the screen size.

I tried the "width: 100%" tag and that works fine, except for the fact that smaller images a stretched out and look pretty ugly.

Using "max-width: 100%" didn't work (neither in IE nor in Firefox).

Anyone know any solution for this in CSS?

[rocknbil]

Welcome aboard Yinan, the easiest solution would be to open the raw image in a new window and let the browser manage it, it will size it down quite well. Forgiving that, you'll need a combination of Javascript and server side handywork to do it.

[Yinan]

i feared that something like this would be the answer... onfortunately javascript would be a no go for us (we have to make a version without javascript that looks good)... y is there no such a thing in CSS? ^^

But thanks for the help anyway

[rocknbil]

Because CSS is not a dynamic "language," it is a static resource to style documents.

You might be able to work out a CSS expression that would do what you like. This is about as "dynamic" as CSS gets. :-) However, CSS expressions actually apply Javascript expressions to CSS, so if Javascript is disabled it will also fail.

However, I don't see why something like this couldn't work. Examine it's logic.

we have to make a version without javascript that looks good

<a href="/images/huge-image.jpg" onclick="return imageResize(this.href);">Huge Image</a>

<script type="text/javascript">
function imageResize(url) {
// enter code here that
// 1)gets the viewport dimensions
// 2) sends those dimensions and image file name to
// a server side script
// 3) server-side script gets dim's of original image
// and returns a proportionate resized string, e.g.
// <img src="/images/huge-image.jpg" width="600" height="400" alt="Huge Image">
return false;
}
</script>

The crux of this exercise: note the return false values. If Javascript is disabled, it will *still* display the image in a new window and allow the browser to resize it as I mentioned. Graceful degradation in it's most simple form.

[rainborick]

I'd agree that a server-side script is the optimal solution, but if you're going to rely on a server-side script I wouldn't get JavaScript involved at all. It would be pretty simple to modify a thumbnail script to check the dimensions of an image and only resize it if it exceeds the maximum width you allow. Otherwise, the script just passes through the original image "as is". Then your <img> tag's 'src' attribute points to the script with a parameter that includes the URL for your image file, and do not include 'width' or 'height' attributes so that the browser shows the images as generated by the script. If you're making a page with several user images, what you'd lose in response time would certainly be outweighed by the overall effectiveness of the results.