/    Sign up×
Community /Pin to ProfileBookmark

how to make image get automatically the screen-size

Copy linkTweet thisAlerts:
Jan 28.2013

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>
[/CODE]

[ATTACH]15347[/ATTACH]

As you can see at the image above, this image’s dimensions are 1300×700 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.

[canned-message]attachments-removed-during-migration[/canned-message]

to post a comment
HTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@Sup3rkirbyJan 28.2013 — You may want to try setting it as an element background and then use the background-size property.
[code=html]
<!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>
[/code]

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%.
[code=html]
<!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>
[/code]

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.
Copy linkTweet thisAlerts:
@Major_PayneJan 29.2013 — 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/bgstretcher-jquery-stretch-background-plugin.html
Copy linkTweet thisAlerts:
@telisjokauthorJan 30.2013 — thank you very much everyone ? everything was really helpfull
×

Success!

Help @telisjok spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 7.27,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ,
analytics: Fullres
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,

tipper: @qewfun,
tipped: live stream
amount: 5000 SATS,
)...