how to make image get automatically the screen-size

**telisjok** · 01-28-2013 10:21 AM

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.

**Sup3rkirby** · 01-28-2013 11:29 AM

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.

**Major Payne** · 01-29-2013 01:03 PM

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

**telisjok** · 01-29-2013 08:04 PM

thank you very much everyone

everything was really helpfull

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

Thread Tools

Display

how to make image get automatically the screen-size

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions