www.webdeveloper.com
Results 1 to 4 of 4

Thread: how to make image get automatically the screen-size

  1. #1
    Join Date
    Jun 2011
    Posts
    29

    how to make image get automatically the screen-size

    Hello everybody,

    i have an index that contains only one <img> tag and nothing more. I want to make this image get the screen size automatically and fit in every screen so there will be no scrollbars and no white spaces. Just an image that takes over the whole place by stretching it.

    this is my index code

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    
    <link rel="stylesheet" href="css/style.css" type="text/css"/>
    
    </head>
    <body>
        <div id="container" align="center">
    		<img src="images/last.png" alt="starting" />  
        </div>  
    </body>
    </html>
    asd.JPG

    As you can see at the image above, this image's dimensions are 1300x700 so it wont fit in my laptop's screen because its too big and it wont match exactly at my desktop's screen because my screen is 22" and the image is small for this screen.

    So could someone help me please? Any help will be highly appreciated.

    Best regards, Telis.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    862
    You may want to try setting it as an element background and then use the background-size property.
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    .imgElem {
      background: url('images/last.png');
      background-repeat: no-repeat;
      background-size: cover;
    }
    </style>
    </head>
    <body>
      <div class="imgElem"></div>
    </body>
    </html>
    But of course this is a CSS3 property that wouldn't be supported in IE8- or very old version of other browsers. In the event support for 'less-than-modern' browsers is required you can simply set the img element to have a width and height of 100%.
    HTML Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <style type="text/css">
    body {
      width: 100%;
      height: 100%;
      margin: 0px;
      padding: 0px;
    }
    </style>
    </head>
    <body>
      <img src="images/last.png" alt="starting" style="width: 100%;" />  
    </body>
    </html>
    I didn't set both the width and height only because that can cause distortion in an image when the browser window does not match the resolution ratio of the image. This would mean that in some cases there may be 'blank' space on either the top or sides of the image, but depending on the actual image, it could be a simple fix to just fade the edges in to whatever color you choose to be the background of your webpage. If not then simply add 'height: 100%;' after the width property and it will always stretch to the user's browser window dimensions.
    "Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

  3. #3
    Join Date
    May 2005
    Location
    Gold Coast (MS)
    Posts
    2,207
    Other suggestions:

    http://www.cssplay.co.uk/layouts/background.html

    bgStretcher jQuery Plugin Allows to Add Background Image to Page and Proportionally Resize it to Fill Entire Window Area: http://www.ajaxblender.com/bgstretch...nd-plugin.html

  4. #4
    Join Date
    Jun 2011
    Posts
    29
    thank you very much everyone everything was really helpfull

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles