Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Dec 2005
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Sizing multiple images...

    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.

    mccd

  • #2
    Regular Coder Actinia's Avatar
    Join Date
    Feb 2007
    Location
    Essex, UK
    Posts
    250
    Thanks
    1
    Thanked 23 Times in 22 Posts
    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.

    John

  • #3
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Fastone image viewer will help you to do this and it's FREE.


    http://www.faststone.org/

    Frank
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #4
    New Coder
    Join Date
    Dec 2005
    Posts
    65
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

    Thanks again.

    mccd


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •