Image scaling in CSS

I am playing with image scaling to percent using CSS. I am new to this and would like some help.

Basically, we have an image gallery - with some very large images (resolution). I would like to ensure that the image never exceeds the size of the browser window, using percentages in CSS perhaps. I would also like to ensure that smaller images are not stretched to any larger than their original size.

This is a live example of a large image:
http://flyawaysimulation.com/modules.php?name=My_eGallery&do=showpic&pid=6950

Example of a small image:
http://flyawaysimulation.com/modules.php?name=My_eGallery&do=showpic&pid=6955

I have been hunting the web high and low for solutions to this, but have found nothing perfect.

Your help is appreciated.

 

Try "max-width"?

 

use this:

.imgclass {
max-width: 530px;
/* Resize the image for IE6 */
width: expression(this.width > 530 ? 530: true);
height:auto;
}

530 is my max width.. you can change it.

 

Thank you for your replies.

I don't actually want to specify a max-width in pixels, this restricts the image scaling for people with very large screens. Are there any other ways to achieve automatic resizing?

 

You mean you don't want to resize image for people with very large screens? If yes, use max-width: 100%; but I think it wont work in IE6...

 

Basically, I always want the image to be as large as possible, but not extend past the current browser width. I tried max-width: 100%; but it's not working correctly on smaller images. They are being stretched. I have applied the code and here is a live example of the stretched image:
http://flyawaysimulation.com/modules.php?name=My_eGallery&do=showpic&pid=6955

My code is as follows:

CSS

img.showpic { max-width: 100%; }

Code (markup):

Image:

<img class="showpic" src="<:FILENAME:>" border="0" alt="<:RAWNAME:>">

Code (markup):

 

Also, Internet Explorer (7&8) is completely ignoring the code and leaving images at original dimensions with no scaling.

 

Strange, Firefox now seems to be ignoring this setting and leaving the images unscaled too. Must have had the old CSS in the cache and just updated.

 

Istrongly suspect that you will not ever achieve this with CSS. You can stretch or shrink in css but always in pixels or relative measurements to other elements, never with regard to the image file resolution, which CSS has no way to parse or determine.

You need PHP or another server-side scripting language with the capability to parse an image file for it's resolution. Then, you could dynamically generate your max width value as inline CSS for each image displayed.

Sorry if that just made it more confusing, but I guess the answer your after is no, because CSS has no way to determine the resolution of an image.

 

Thank you for your reply.

I'm not sure if you understood what I wanted to do exactly. Basically, we have large images (2000px+ wide) and small images (640px- wide). I would like to scale the larger images so that they never exceed the browser window size. I would also like to ensure that images smaller than browser window size are left at their original resolution.

Is it possible to wrap the images in a DIV set at say 100% and do it that way?

 

As you already found out, it is easy to make your 2000px image stay in the screen.

It's the part about the 640px image that is the problem. In order to never stretch your image larger than it's resolution, you have to know the resolution.

When you set something to 100% in CSS, you are not setting it to 100% of it's OWN size, you are setting it to 100% of it's PARENT ELEMENT's size.

So, if you set your div to 640px, and then your image to 100%, it won't stretch past the 640px div.

First, you have to find out that the image is 640px wide. It's easy to get confused when you say it needs to not go past 640px, but that's not really the case, your image might be only 256 or 800px wide, right?

Until your script knows the size of the image, it can't keep it at it's original resolution.

If you can't use a scripting language to do it at runtime, maybe you could store the resolution info when the pic is uploaded. However, same story, CSS can't read data from a text file or database on a server either. Sorry dude, you need a server side scripting language to ensure that the pictures are not stretched past their original resolution.

Don't be too worried, it's like five lines of PHP code.

 

Yes, our script already stores each picture info (width and height) in a database when it's uploaded and processed. I can call this information when the image is displayed on the dynamic page quite easily.

Where do we go next?

I appreciate your help.

 

Ok then, you've got it covered.

you wrap the pic in a div, and you set the max-width of that div to the width of your photo.



If all of the browsers respect max-width (do they?) your image will be 100% of the div, but never more than the original resolution. You can center it in it's parent or in the page body.

If that's no help, maybe I'll actually write some test code, lol, since i'm feeling helpful today.

 

ok, I set up a sample.

I don't know if I can link yet so here it is:

hxxp://adstash.com/imgdiv.zip

There are four files, two images, a stylesheet, and an .htm file. You can open the HTM and see the behavior you want.

The important part to noe is that in the imagewrap divs, in the .htm (not the stylesheet) there is an inline style to set the max width for that particular imagewerap div.

That inline style has to be written by your script using the image width stored in your database. Then, as you can see in the sample, the images will perform how you like.

EDIT: I'll leave that file up there for a while if anyone else wants to see it.

 

Great, thank you for the code

I've applied the following to my sites code:

<div style="width:100%; max-width:<:IMAGEWIDTH:>; height:auto;"><img src="<:FILENAME:>" style="width:100%;" alt="<:RAWNAME:>">

Code (markup):

I've left the styles there for testing, once It's fully functional I'll move it to the stylesheet.

It works perfectly in Firefox

However, it's a different story in Internet Explorer (7&8). IE seems to simply ignore the scaling down of the images, and even makes the smaller ones larger that their native resolution.

Examples: Take a look at the following in IE and then Firefox...

Large image scaled down (unless you have a very large screen!):
http://flyawaysimulation.com/modules.php?name=My_eGallery&do=showpic&pid=6950

Small image left at native:
http://flyawaysimulation.com/modules.php?name=My_eGallery&do=showpic&pid=6955

How can this be resolved?

Thank you again for your help.

 

I don't have a quick answer for that, I'm boggled by it. The only thing I see that sometimes causes me unexpected IE behavior may be this, change your DTD to:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This will let you see if including the actual DTD will straighten it out. Max-width is a CSS2 and I'm not sure if that's why or what.

I will tell you that the only browser I tested this in before I sent it was IE7

The DTD is worth a shot.

 

Ok, adding the "http://www.w3.org/TR/html4/loose.dtd" has revealed all of the bad coding in our website in Internet Explorer. Things are randomly centered, DIVS are broken and H tag styles are incorrect. It has also found and rendered what seems to be open ended <a> tags.

However, the large image is now scaling correctly But smaller image are being stretched in IE...

Are there any other changes I can make to the DOCTYPE, maybe even removing completely (is this wise?)...

 

I think I'm going to run the site through the validator a few times until all of the code it correct...

 

Yeah the validator is a wise maneuver.

Removing the document-type declaration completely will cause you even worse problems. I find that with no doc type at all in IE7 the simplest of styles render incorrectly, things like bing unable to assign a zero-height to a div.

Validating can help you in the SEs as well, possibly. Google has stated in the past that correct document format, etc... factored into ther ranking of a page. I'm not sure how true that is today, or how important it is.

Plus, the invalid code will only come back to bite you again later, in another unexpected and irritating fashion most likely.

Good luck man and I'll still watch the thread, if you get it to validate at http://w3.org and the images still won't size properly, I'll help out some more.

 

I suggest you set a max-width, if you're gonna make it fluid width.
Suppose someone's monitor is 1920px wide, or even wider. How does it feel to read such a long line text?
It's OK for titles, slogans or whatever, but totally suffering for paragraphs. Think about it.