...

View Full Version : Resizing Images



evo
09-23-2007, 12:46 PM
How would I resize an image to fit the entire screen? It's what people tend to do with flash and such but I want to do it without flash...

Examples: www.drawingart.org www.anteprima.com/fw07 http://www.marc-aurel.com/2007/ www.minhlong.com (enter english site)

coothead
09-23-2007, 03:36 PM
Hi there evo,

you can see an example here...

http://mysite.orange.co.uk/azygous/stretch_bg_img.html
...and the code here...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>full page image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
height:100%;
margin:0;
padding:0;
border:0 solid;
overflow:hidden;
}
#myImage{
position:absolute;
width:100%;
height:100%;
}
#myImage img{
width:100%;
height:100%;
}
</style>

</head>
<body>

<div id="myImage">
<img src="images/blood_ball.jpg" alt=""/>
</div>

</body>
</html>
coothead

evo
09-23-2007, 05:06 PM
I need it as a background image not as a selectable object as in the links, is that possible?

cloned
09-23-2007, 07:22 PM
its litually the same (ill edit the code above :) )



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>full page image</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
html,body {
height:100%;
margin:0;
padding:0;
border:0 solid;
overflow:hidden;
}
#myImage{
background-image:url(myimage.png);
position:absolute;
width:100%;
height:100%;
}
</style>

</head>
<body>

<div id="myImage"></div>

</body>
</html>

coothead
09-23-2007, 07:32 PM
Hi there evo,

you will have to wait for CSS3 implementation for a 'stretched' background. ;)

http://www.w3.org/TR/css3-background/#the-background-size
coothead



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum