...

View Full Version : Automatically Sizing Images



Powered
01-29-2007, 11:18 AM
Resizing text is easy just add percentages, but how do you do the same to images. I have a number of images but they are all happy being in pixel size. But with one image I need to add it to 100% scale so as the area size changes with screen sizes the image either shrinks or expands. I have tried adding percentages for the width and height but this just makes the image disappear.

Basically, how do I make images resize in the same way text does?

rmedek
01-29-2007, 03:53 PM
The same way you would resize text:


img {
width: 100%;
height: 100%;
}

If you use CSS you have to remember not to use size attributes in the image tag in your HTML, as they have the highest specificity. Of course, keep in mind images aren't designed to be sizeable and will probably look awful as they are stretched every which way.

Powered
01-29-2007, 05:34 PM
Thanks,

so whats the best way of resizing. In one screen size it looks really good, in another it throws the whole column out of place.

How do you deal with image sizes?

rmedek
01-29-2007, 05:43 PM
Practice.

Or design sites that use fixed image sizes or tiled background images.

Or use Flash and vector-based images.

Karen S. Garvin
01-29-2007, 06:22 PM
I have a similar issue -- what is a good size for, say, a photo that's going to be on a page with 5-6 images total, like in a photo gallery? What guidelines can I use for size (in pixels) for the individual images?

neomaximus2k
01-29-2007, 07:40 PM
I have a similar issue -- what is a good size for, say, a photo that's going to be on a page with 5-6 images total, like in a photo gallery? What guidelines can I use for size (in pixels) for the individual images?

First of all it is ALWAYS best to use thumbnails for images, resizing the image in HTML is a bad idea as the user still has to download the bigger image and reduces page load time.

As for image sizes, again that depends on what the image is and the type you will be using.

For most photo's JPEG images are the best and you will be looking at around 20Kb maximum, the best idea is to use thumbnails for the 6 images you wish to show on the page and allow the user to click on the image and view the larger picture.

If you would like more information on optimising images (http://www.paramiliar.com/articles.php?articleid=5) then visit

http://www.paramiliar.com/articles.php?articleid=5

hope this helps



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum