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 2 of 2

Thread: resize an image

  1. #1
    New to the CF scene
    Join Date
    Feb 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question resize an image

    I have figured out how to use div instead of tables so that my website automatically readjusts the page as the user resizes the page. I have an image as my header, though; and I can't figure out how to get it readjust too. It stays a constant size (whatever I created it as) so it is either too big or too small for the page depending on what size the user has their webpage set at. Can someone tell me if there is a way to code a picture in CSS to automatically readjust?

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    Sort of. If you enclose the image in a block level element that resizes (like a div), then set the dimensions of the image to percentages, it'll resize according to width. But not height, as the height of a div adjusts to its content...

    Code:
    CSS:
    
    #expando {
     width: 50%;
     height: 25%;
     }
    
    #expando img {
     width: 100%;
     height: 100%;
     }
    
    HTML:
    
    <div id="expando">
     <img src="example.gif" alt="stretchy" />
    </div>
    Try something like that and see if it works out for you. Usually people make one large background image and try to incorporate the change in size into the design. Here's an example.

    Hope this helps,


  •  

    Posting Permissions

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