Resizing image to fill browser window

maguskrool · Oct 13, 2007

Hi there.

I have an image I need to resize whenever the browser windowis resized. After reading other posts and general javascript functioning, I wrote this code:

Code:

/*from my_code.js*/
function imgNewSize() {
	document.getElementById("my_image").style.width = document.body.offsetWidth;
}

/*from my_site.html*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<script language="JavaScript" src="javascript/my_code.js" type="text/javascript">
</script>
</head>

<body onresize="imgNewSize();">
<img id="my_image" name="my_image" src="images/1.jpg" />
</body>
</html>

If I use a value like "300px" instead of document.body.offsetWidth in imgNewSize, it works as expected. So what am I doing wrong?

Thanks in advance.

http://www.vivoeusebio.com

CliveC · Oct 13, 2007

I think it is because the body tag has not been fully parsed. However you do not need javascript to make the image 100%.

Just use:
<img style="width:100%"
id="my_image" name="my_image" src="images/1.jpg" />

Clive

http://tubularity.com

j4606 · Oct 13, 2007

Code:

document.getElementById("my_image").style.width = document.body.offsetWidth[COLOR=red]+"px";[/color]

also i would make sure to to add style width to image just to be safe.

Code:

<img id="my_image" name="my_image" [COLOR=red]style="width:100px;"[/color] src="test.gif" />

j4606 · Oct 13, 2007

Oh yah, CliveC's solution seems better,

maguskrool · Oct 14, 2007

Thanks guys.

I downplayed what I wanted to achieve because I thought that I could handle the rest without problems. Well, guess what? I have new problems now.

Yes, usually I could use the 100% style, but what I really need to do is scale an image that occupies the whole browser window, maintaining its proportions.

So I did the following:

Code:

/*from my_code.js*/
function imgNewSize() {
	//Ratios
	var nRatioImg = document.getElementById("my_image").style.width/document.getElementById("my_image").style.height;
	var nRatioBrowser = document.body.offsetWidth/document.body.offsetHeight;
	if (nRatioImg > nRatioBrowser) {
		document.getElementById("my_image").style.height = document.body.offsetHeight+"px";
	} else {
	    document.getElementById("my_image").style.width = document.body.offsetWidth+"px";
	}
}

This should compare the ratio between the image's dimensions and the browser window's and decide how to redimension the image. Or so I thought. It seems the offsetHeight property indicates the height of the contents, not the browser window's. I've tried clientHeight with the same results.

So what can I do to make this work?

http://www.vivoeusebio.com

Olavxxx · Oct 15, 2007

Hi, I use this code for my grid-size calculations:

Code:

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
    winW = Math.floor(((window.innerWidth - 253) / 170));
    winH = Math.floor(((window.innerHeight - 185) / 140));
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = Math.floor(((document.body.offsetWidth - 253) / 170));
  winH = Math.floor(((document.body.offsetHeight - 185) / 140));
 }
 if (navigator.appName.indexOf("Opera")!=-1) {
  winW = Math.floor(((document.body.clientWidth - 253) / 170));
  winH = Math.floor(((document.body.clientHeight - 185) / 140));
 }

Olav Alexander Mjelde

http://www.volvo-power.net

Admin & Webmaster

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Resizing image to fill browser window

maguskrool

Technical User

CliveC

Programmer

j4606

MIS

j4606

MIS

maguskrool

Technical User

Olavxxx

Programmer

Similar threads

Part and Inventory Search

Sponsor