SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Addict
    Join Date
    Mar 2008
    Location
    Sterling, CO
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Proportional Image Size

    How do you make an image size proportional to the size of the viewers browser?

    Is that done with HTML?


    Thank you

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can specify the width and height attributes as percentage values, but since this is a presentational matter it really belongs to the realm of CSS.

    Browsers aren't very good at resizing images, especially not when enlarging them. I'd recommend setting a maximum width that equals the natural width of the image. This doesn't work in IE6 or older, though.

    Code HTML4Strict:
    <img src="/path/to/image.jpg" alt="(text equivalent)" class="medium">

    Code CSS:
    img.medium {
      width:50&#37;;
      max-width:400px;
      height:auto;
    }
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict
    Join Date
    Mar 2008
    Location
    Sterling, CO
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    7,000+ posts!

    You gotta know your stuff! (smile)

    So will css work with a lot more browsers? Maybe like most of them?

    Thanks

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm a taciturn newbie compared to some of the veterans here who have racked up over 20,000 posts.

    The CSS above should work in Opera, Firefox (and other Gecko browsers), IE7, Safari and Konqueror (I think). Probably others, too. You may want to hide it from IE6, because I think the height:auto doesn't work there so it will muck up the aspect ratio. You can hide it from IE6 by using the following selector:
    Code CSS:
    html>body img.medium {
    Birnam wood is come to Dunsinane

  5. #5
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Freejoy View Post
    7,000+ posts!

    You gotta know your stuff! (smile)
    I would probably go off the fact that he WROTE THE BOOK!
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only half of it, Spike. The useful bits were written by Paul.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Addict
    Join Date
    Mar 2008
    Location
    Sterling, CO
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    AutisticCuckoo,

    I read your solution and was trying to figure out where and how exactly to put it into the code. And while looking around found this:

    ******************

    <style type="text/css">
    #img3 IMG {width:100%; max-width:199px;}
    </style>

    <body>
    <p id="img3"><img src="images_jpg\happy.jpg" alt="happy person"></p>
    </body>

    *******************

    It works like a charm but the only thing is if there's two images beside each other one will drop down below the other one. They won't stay beside each other.

    So, I was wondering if/how to make a "boundary" ...like a line below the images that says "NOTHING goes beyond this line." Something like that. Is that possible to do? Even though the page is fluid? It just seems like if the image has a place to go...it goes, but if there was nowhere to go it would have to sit there in go "proportional."

    Thank you

  8. #8
    SitePoint Zealot
    Join Date
    Apr 2008
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    u do it by using the % tags for the image height and idth instead of static ones
    Last edited by web67; Apr 15, 2008 at 20:11.
    Keep Up to date about everthing Website Flipping
    Find out how to same thousands on your Mortgage Broker fees.

  9. #9
    SitePoint Addict
    Join Date
    Mar 2008
    Location
    Sterling, CO
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How do you mean? Do you have an example I could try?

  10. #10
    SitePoint Zealot
    Join Date
    Apr 2008
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    simple use image width=some percent and height=some %

    add it to css or simply img tag, why u need example for this!
    Last edited by web67; Apr 15, 2008 at 20:08.
    Keep Up to date about everthing Website Flipping
    Find out how to same thousands on your Mortgage Broker fees.

  11. #11
    SitePoint Addict
    Join Date
    Mar 2008
    Location
    Sterling, CO
    Posts
    275
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Because I've never done that before.

    If I get one character out of place the whole thing doesn't work. I have no idea where to put the % signs. I'm working with a very basic template piecing things together as I go. Trying to get a "framework" together or something to design within.

    Like right now I've been looking everywhere for how to start a text paragraph at the top, right, side of a picture. I read it somewhere but I haven't been able to locate it.

    I'm all over the place!

  12. #12
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Freejoy View Post
    It works like a charm but the only thing is if there's two images beside each other one will drop down below the other one. They won't stay beside each other.
    If the width is 100% it will cover all available horizontal space. You can't have two things with 100% width side by side.

    If you want two images side by side, you should set the width to less than 50%. Images are inline elements, which means whitespace in the HTML markup between the <img> tags will appear as a single space between the images. Even if you don't have any space between the tags, you should still set the widths just below 50% (like 49.9%) to avoid issues with rounding errors.

    (BTW, you should use a '/' in the image URI, not a '\', even if you're using Windows.)

    Quote Originally Posted by Freejoy View Post
    So, I was wondering if/how to make a "boundary" ...like a line below the images that says "NOTHING goes beyond this line." Something like that. Is that possible to do? Even though the page is fluid? It just seems like if the image has a place to go...it goes, but if there was nowhere to go it would have to sit there in go "proportional."
    I'm afraid I don't understand what you mean here. This will give you a line below the images if they both reside in the same paragraph:
    Code CSS:
    #img3 {border-bottom:1px solid #000}
    Birnam wood is come to Dunsinane


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
  •