Image 100% of width

Discussion in 'HTML & Website Design' started by lock, May 8, 2008.

  1. #1
    How do I get an image to be 100% of the screen width, without creating a sideways scroll bar in lower screen resolution displays?

    Cheers
    Lock
     
    lock, May 8, 2008 IP
  2. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #2
    Did you try:
    
    <img src="me.gif" width="100%" height="100%">
    
    Code (markup):
     
    itcn, May 9, 2008 IP
  3. lilac2

    lilac2 Peon

    Messages:
    367
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Your image will be stretched if you do that.
     
    lilac2, May 9, 2008 IP
  4. lock

    lock Banned

    Messages:
    205
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Anyways around this problem. I want the image to appear 100% of the width of the screen but not 100% hight. Like as a banner?
     
    lock, May 9, 2008 IP
  5. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Yes this will do it:
    <img src="me.gif" width="100%" />

    But you shouldn't do this because the image will become distorted when the browser size is made smaller.
     
    wd_2k6, May 9, 2008 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Then take itcn's code and just put the true height in px, and leave the width="100%" in.

    Remember that's 100% of its parent so it'll only go across the page if its parent does too. And, yeah, it'll stretch and distort. Is this what you want?

    *edit, you beat me to it wd : )
     
    Stomme poes, May 9, 2008 IP
  7. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #7
    No worries, mind me asking what the link in your sig is about it's sent me dizzy!!
     
    wd_2k6, May 9, 2008 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    This kid who works at Yahoo (Evan Goers) discovered at some point that Mozilla supported both blink and marquee tags (it used to be I think blink for IE? and marquee for Nutscrape?), so make the HTML horror to show those tags in all their glory. Not my site in either case, just thought it was awesome. Awesome like a Troma film : ) With redneck zombies. And mullets.

    Are you blind yet?
     
    Stomme poes, May 9, 2008 IP
  9. itcn

    itcn Well-Known Member

    Messages:
    795
    Likes Received:
    31
    Best Answers:
    0
    Trophy Points:
    118
    #9
    Just coming out of an epileptic fit cause o that :)
     
    itcn, May 9, 2008 IP
  10. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Who needs Macromedia Flash when you can use HTML Horror!!
     
    wd_2k6, May 9, 2008 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Lawlz.

    Back on topic, lock let us know what it looks like with your code. There is one other technique that might be more what you're looking for, but it really depends on what the image is. Actually, two techniques, if it's something like a gradient you can just have a 2px-wide part of it and repeat-x, but if it's something like a photo... ah, let us know.
     
    Stomme poes, May 9, 2008 IP