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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Automatically Sizing Images

    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?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    The same way you would resize text:

    Code:
    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.

  • #3
    Regular Coder
    Join Date
    Jan 2007
    Posts
    134
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Practice.

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

    Or use Flash and vector-based images.

  • #5
    Regular Coder Karen S. Garvin's Avatar
    Join Date
    Nov 2006
    Location
    Maryland
    Posts
    227
    Thanks
    5
    Thanked 2 Times in 2 Posts
    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?
    ----------------------------------------------
    Karen S. Garvin
    http://ksgarvin.wordpress.com

  • #6
    Regular Coder
    Join Date
    Jan 2007
    Posts
    213
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Karen S. Garvin View Post
    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 then visit

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

    hope this helps
    Matthew Bagley
    Paramiliar Design Studios
    Website Design | Website Development | Search Engine Optimisation (SEO)


  •  

    Posting Permissions

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