SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2002
    Posts
    15
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    percentage widths & heights for images?

    Hi all,
    In my html page, for my images, I haven't set width & height at all(neither px nor %). So when I resize my browser/shrink it by dragging the resize arrow, my images shrink and overlap. I want them to shrink if the browser is shrunk, but not overlap onto each other!
    I was wondering if it is possible to eliminate this by setting % heights and widths for images ?(I don't want to try pixel widths/heights b'coz of different sizes of browsers etc..)
    How do I find out the exact % dimesions I want? Is it a lot of trial&error?
    Thanks

  2. #2
    Former Staff Member silver trophy Adam P.'s Avatar
    Join Date
    Apr 2001
    Location
    San Francisco
    Posts
    3,288
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi! Using percentages for images is probably a very bad idea. (1) It will take a lot of guessing and checking to get the percentages that make the images look correct in a certain browser size, and (2) even if you get the correct percentages for, say, a 1024x768 window, someone that resizes their window or uses a different resolution is going to see your images all squished or stretched, and that's just yucky! [img]images/smilies/smile.gif[/img]

    Your best bet would be to set the image sizes with pixels, so that they remain proportional in all resolutions, and design the site, as a whole, to fit all resolutions. For more help on designing a website that stretches and shrinks to fit all browser sizes, see this tutorial. [img]images/smilies/smile.gif[/img]

    Good luck! [img]images/smilies/biggrin.gif[/img]
    SPF Mentor/Advisor 2001-2003
    SPF Designer of the Year 2002
    SPF Graphic Designer of the Year 2003
    AdamPolselli.com

  3. #3
    SitePoint Addict theGuest's Avatar
    Join Date
    Jun 2002
    Location
    Vancouver, BC Canada
    Posts
    372
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aaa... actually svijaya.. your images do not resize just because you leave out the attributes. That's not possible in any "normal" browser. Some browsers recognize a % width attribute, but no browser knows how to read/interpret a % height attribute. Your images may very well be 'shifting around', which stretching a window will do, but not resizing.

    The only thing leaving out the size attributes does is make it a longer wait for the visitor's browser to download and render the images. You're leaving it up the browser to figure out the correct dimensions of the images, and that takes a bit longer than if you had simply put them in yourself. But make no mistake, the browser does know the size of your images. Good html design dictates that YOU, the author, be efficient and put in all the details needed for any content that will be rendered to a visitor's browser. That's only fair.

    Using Flash is the proper way to get the effect you're after. Not that it's not possible with the use of Javascript/dhtml, it's just not a practical thing to do.


Bookmarks

Posting Permissions

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