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 3 of 3
  1. #1
    New Coder
    Join Date
    May 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Auto-resizing image

    Ok my question is how do you get images to auto-resize both ways? For example, the title in the following code. I see it done all the time on webpages. I can get the title to resize horizontally, but that squeezes the image together. I don't want that. I want it to resize both horizontally and vertically, so the image is not squished. I've seen it where the whole entire image resizes when your browser window resizes.

    The picture is too big to upload right now, but I think you know what I'm talking about. Thanks.

    Code:
    <!DOCTYPE html PUBLIC 
    "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang = "en" dir="ltr">
    
    <head>
    <title></title>
    <meta http-equiv="content-type" 
    content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" href="main.css" type="text/css" />
    </head>
    
    <body>
    <div id="container">
    	
    	<div id="top">
    	<p><img border="0" src="title.png" width="985" height="109"></p>
    	</div>
    </div>
    </body>
    </html>

  • #2
    Senior Coder
    Join Date
    Dec 2004
    Location
    Essex, UK
    Posts
    2,636
    Thanks
    0
    Thanked 0 Times in 0 Posts
    An image wouldn't look good stretched to be honest, what you've seen is probably an image and a header with a background image which is repeated.

    But to do it you'd use percentages as so...

    <img border="0" src="title.png" width="90%" height="20%">

    ...and place the border="0" into your CSS -

    img { border: none }

  • #3
    New Coder
    Join Date
    May 2005
    Posts
    61
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yeah that does screw the image up bigtime. It does what I said though...kinda.

    I'll find a site here in a second for an example of what I am seeing. It seems like the images resize but their quality stays the same. I'll re-post as soon as a find that site. Thanks.


  •  

    Posting Permissions

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