02-15-2008, 03:54 AM
Hi. I have numerous images on my page and I'd like to size them all to the same width & height. I know I can simply add the width & height attributes to each img tag but I'm trying to find a more efficient way to do it.
I Googled css image size and looked at countless sites which explained how to do some really complex and esoteric things with images but nothing as simple as setting uniform size.
I'd appreciate some help.
02-15-2008, 11:11 AM
Setting a fixed image size using the img width and height attributes is likely to create distortions and pixillations. There are two solutions:
Use a photo-editor to resize all your images to a fixed height and width. You will need to maintain the aspect ratio when scaling, then truncate (crop) as necessary. You can use a photoshop macro to do automate this, or use one of the image batch processing programs out there.
Place each image in a div with a fixed height and width and use the overflow property to set the crop. A simpler way might be to place the image as a background-image of the div. The image can then be placed using background-position.
02-15-2008, 11:25 AM
Fastone image viewer will help you to do this and it's FREE.
02-17-2008, 03:55 AM
Thanks for your replies. I wanted to avoid actually resizing each image; I use Jasc's (now Corel's) Paint Shop Pro. I already had the images uploaded and I thought it would be easier if there was some CSS image tag where I could specify the size on the style sheet.
Image distortion wouldn't be a problem as the ones I need to resize are too large. Using DIV is an idea I hadn't considered.