How to keep the size of the image same in all resolution ?

Discussion in 'HTML & Website Design' started by poseidon, Feb 23, 2006.

  1. #1
    Hi,

    I am working on my site, and whenever the resolution gets changed , say from 1072*768 to 800*600, the images get expanded(enlarged) and site looks ugly.How to make sure that the size of the image remains same.
     
    poseidon, Feb 23, 2006 IP
  2. chengfu

    chengfu Well-Known Member

    Messages:
    113
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    108
    #2
    Do you put the "width" and "height" attributes into img-tags?
     
    chengfu, Feb 23, 2006 IP
  3. mdvaldosta

    mdvaldosta Peon

    Messages:
    4,079
    Likes Received:
    362
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yea, that'll fix it... problem is though that it would't expand anymore either with larger resoltions.
     
    mdvaldosta, Feb 23, 2006 IP
  4. chengfu

    chengfu Well-Known Member

    Messages:
    113
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    108
    #4
    Can someone give me an example where I would like an image to adjust with the browser size? Personally I'm very happy if pictures stay right where I put them ;-)
     
    chengfu, Feb 23, 2006 IP
  5. hans

    hans Well-Known Member

    Messages:
    2,923
    Likes Received:
    126
    Best Answers:
    1
    Trophy Points:
    173
    #5
    the point is that your above example the picture IS the same in absoliute px size but you change the size of the screen by changing resolution
    hence the proportions change NOT the picture size
    on a 768x1024 screen an equal number of px is different in absolute size in mm or inch than on a 800x600 or 1200x1400 screen

    a change in resolution back to 800x600 may only be needed if font too small and readers want to enlarge shrinking fonts size
    if you change font size definition from px to pt
    then you have a constant absolute font size in all reslutions of screen
    72 pt = 1 inch on any screen resolution

    I am not aware of any official HTML solution to shrink picture in px proportionally when resolution is decreased
    i think most PCs nowadays have already resolutions far in excess of 1024

    but I am sure in javascript could have a solution to modify the width / height tag.values to maintain original proportions when changing screen resolution

    may bhe Google can find js solution or someone else here in DP forum
     
    hans, Feb 28, 2006 IP
  6. slickricky

    slickricky Active Member

    Messages:
    240
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #6
    You've probably designed your site using the higher resolution then checked it on the lower resolution. Design your site using 800 x 600 resolution, then higher resolutions will "shrink" it, probably making it look better. It would really be unrealistic to use javascript to change the image size. Your page would simply be doing work that it shouldn't be doing, thus slowing it down, and making it less functional.
     
    slickricky, Feb 28, 2006 IP