HTML and CSS

Center Image and Size for Browser Window

Please support our HTML and CSS advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2007

Posts: 14

Reputation: Mike_H is an unknown quantity at this point

Solved Threads: 0

Mike_H

Offline

Newbie Poster

Center Image and Size for Browser Window

Sep 8th, 2009

I have a page with one image that I need to center both horizontally and vertically in the browser window and also to fit vertically without going past the viewport of the screen. It needs to be able to do this on IE7+/Firefox 3+ and all variations of screen resolutions and sizes.

The following code is most promising but does not work in IE7. (I don't have 8 yet.) I think the line
iw=document.body.clientWidth;ih=document.body.clientHeight;}
is not correct for IE. Can someone know the fix for this or have a better way of achieving my goal? You can see the test page at http://www.catholicadultfaith.com/test2.html.

Thanks.

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type='text/javascript'>

function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {

// fit a graphic within the current window or frame
// showpic provided by www.DragonQuest.com

	if (src==null) return;
	var iw, ih			// Set inner width and height for NS and Explorer
	if (window.innerWidth==null) {
		iw=document.body.clientWidth;ih=document.body.clientHeight;}
	else {iw=window.innerWidth;ih=window.innerHeight}
	if (w==null) w=iw; 				// width
	if(h==null)  h=ih;				// height
	if(alt==null) alt="Picture";		// alt text
	if(aln==null) aln="left";			// alignment
	if(pw==null) pw=100;			// percentage width
	if(ph==null) ph=100;			// percentage height
	if(bw==null) bw=0;			// border width
	if(bh==null) bh=0;			// border height
	var sw=Math.round((iw-bw)*pw/100);
	var sh=Math.round((ih-bh)*ph/100);
	if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
	else sh=Math.round(h*sw/w);
	document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">');
	}
</script>


<style type="text/css">


div#page {
  width:100%;
	margin:0 auto;
	padding:5px;
	text-align:center;
}


div#content {
  width:100%;
	margin: 0 auto;
	font-family:Georgia, 'Times New Roman', Times, serif;
	font-size: 1em;
}



</style>
</head>
<body bgcolor="#FFFFF0">

<div id="page">
 <div id="content">
 <a href="angels_and_demons.html">
 <script type='text/javascript'>

showpic ("images/front%20page%20graphic.jpg", 900, 997,"collage", "center")

</script>
</a></div>

</div>

</body>
</html>

Last edited by Mike_H; Sep 8th, 2009 at 7:17 pm. Reason: fix code tags

•

Join Date: Aug 2009

Posts: 12

Reputation: Enthused is an unknown quantity at this point

Solved Threads: 1

Enthused

Offline

Newbie Poster

Re: Center Image and Size for Browser Window

Sep 8th, 2009

Hi try using this code, place it inside the html <body></body> tags.

Help with Code Tags

(Toggle Plain Text)

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle"><img src="yourimage.jpg" width="100" height="100" /></td>
  </tr>
</table>

Just change yourimage.jpg and the height and width value to the same value as the image you want to display. Simples

Last edited by Enthused; Sep 8th, 2009 at 7:51 pm.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Center Image and Size for Browser Window

Sep 8th, 2009

•

Originally Posted by Mike_H

I have a page with one image that I need to center both horizontally and vertically in the browser window and also to fit vertically without going past the viewport of the screen. It needs to be able to do this on IE7+/Firefox 3+ and all variations of screen resolutions and sizes.

The following code is most promising but does not work in IE7. (I don't have 8 yet.) I think the line
iw=document.body.clientWidth;ih=document.body.clientHeight;}
is not correct for IE. Can someone know the fix for this or have a better way of achieving my goal? You can see the test page at http://www.catholicadultfaith.com/test2.html.

Thanks.
Help with Code Tags

(Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>

<script type='text/javascript'>

function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {

// fit a graphic within the current window or frame
// showpic provided by www.DragonQuest.com

	if (src==null) return;
	var iw, ih			// Set inner width and height for NS and Explorer
	if (window.innerWidth==null) {
		iw=document.body.clientWidth;ih=document.body.clientHeight;}
	else {iw=window.innerWidth;ih=window.innerHeight}
	if (w==null) w=iw; 				// width
	if(h==null)  h=ih;				// height
	if(alt==null) alt="Picture";		// alt text
	if(aln==null) aln="left";			// alignment
	if(pw==null) pw=100;			// percentage width
	if(ph==null) ph=100;			// percentage height
	if(bw==null) bw=0;			// border width
	if(bh==null) bh=0;			// border height
	var sw=Math.round((iw-bw)*pw/100);
	var sh=Math.round((ih-bh)*ph/100);
	if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h);
	else sh=Math.round(h*sw/w);
	document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">');
	}
</script>


<style type="text/css">


div#page {
  width:100%;
	margin:0 auto;
	padding:5px;
	text-align:center;
}


div#content {
  width:100%;
	margin: 0 auto;
	font-family:Georgia, 'Times New Roman', Times, serif;
	font-size: 1em;
}



</style>
</head>
<body bgcolor="#FFFFF0">

<div id="page">
 <div id="content">
 <a href="angels_and_demons.html">
 <script type='text/javascript'>

showpic ("images/front%20page%20graphic.jpg", 900, 997,"collage", "center")

</script>
</a></div>

</div>

</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <script type='text/javascript'> function showpic(src, w, h, alt, aln, pw, ph, bw, bh) { // fit a graphic within the current window or frame // showpic provided by www.DragonQuest.com if (src==null) return; var iw, ih // Set inner width and height for NS and Explorer if (window.innerWidth==null) { iw=document.body.clientWidth;ih=document.body.clientHeight;} else {iw=window.innerWidth;ih=window.innerHeight} if (w==null) w=iw; // width if(h==null) h=ih; // height if(alt==null) alt="Picture"; // alt text if(aln==null) aln="left"; // alignment if(pw==null) pw=100; // percentage width if(ph==null) ph=100; // percentage height if(bw==null) bw=0; // border width if(bh==null) bh=0; // border height var sw=Math.round((iw-bw)*pw/100); var sh=Math.round((ih-bh)*ph/100); if ((w*sh)/(h*sw)<1) sw=Math.round(w*sh/h); else sh=Math.round(h*sw/w); document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">'); } </script> <style type="text/css"> div#page { width:100%; margin:0 auto; padding:5px; text-align:center; } div#content { width:100%; margin: 0 auto; font-family:Georgia, 'Times New Roman', Times, serif; font-size: 1em; } </style> </head> <body bgcolor="#FFFFF0"> <div id="page"> <div id="content"> <a href="angels_and_demons.html"> <script type='text/javascript'> showpic ("images/front%20page%20graphic.jpg", 900, 997,"collage", "center") </script> </a></div> </div> </body> </html>

Here you go sun, this code will do exactly what you demand and will look absolutely the same in both browsers IE6+ and FX,

Help with Code Tags

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
html, body	{	height: 100%; width: 100%; margin: 0; padding: 0; border: none; overflow: auto}
div#page	{	text-align: center; height: 100%; width: 100%; }
div#page img{	height: 98%; border: none; top: 1%; position: relative }
</style>
</head>
<body bgcolor="#FFFFF0">
<div id="page"><a href="angels_and_demons.html"><img src="http://www.cliffordharrington.com/catholicadultfaith/images/front%20page%20graphic.jpg"></a></div>
</body>
</html>

Just copy-paste it, than take your time and wonder.

•

Join Date: Jun 2007

Posts: 14

Reputation: Mike_H is an unknown quantity at this point

Solved Threads: 0

Mike_H

Offline

Newbie Poster

Re: Center Image and Size for Browser Window

-1

Sep 9th, 2009

Troy III,
It works in Firefox but there is no graphic in IE7.
Mike_H

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Center Image and Size for Browser Window

Sep 9th, 2009

•

Originally Posted by Mike_H

Troy III,
It works in Firefox but there is no graphic in IE7.
Mike_H

Absolutely IMPOSSIBLE.
The code was tested in explorer 6, and when something works in explorer 6, it will work in explorer 12 too.
Here, try this with omitted doc-type declaration:

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<style type="text/css">
body	 {	margin: 0; padding: 0; border: none; overflow: auto}
div#page {	text-align: center; }
div#page img{	height: 96%; border: none; top: 2%; position: relative }
</style>
</head>
<body bgcolor="#FFFFF0">
<div id="page"><a href="angels_and_demons.html"><img src="http://www.cliffordharrington.com/catholicadultfaith/images/front page graphic.jpg"></a></div>
</body>
</html>

Please Copy-Paste the complete code (AS IS!). Have a nice day.

Last edited by Troy III; Sep 9th, 2009 at 3:10 pm.

Attached Thumbnails

•

Join Date: Jun 2007

Posts: 14

Reputation: Mike_H is an unknown quantity at this point

Solved Threads: 0

Mike_H

Offline

Newbie Poster

Re: Center Image and Size for Browser Window

Sep 19th, 2009

I was able to solve it by changing the line
iw=document.body.clientWidth;ih=document.body.clientHeight;}
to
iw=document.documentElement.clientWidth;ih=document.documentElement.clientHeight;}

and it now works great.

Thanks to all who responded.

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Center Image and Size for Browser Window

Sep 19th, 2009

this section of daniweb is:
DaniWeb Community > Web Development > Web Design > HTML and CSS

I gave you a pure html/css solution! With a screen-shot confirming it.
Anyway, javascript/dhtml/ajax Q/A, are in another forum section...

•

Join Date: Jun 2007

Posts: 14

Reputation: Mike_H is an unknown quantity at this point

Solved Threads: 0

Mike_H

Offline

Newbie Poster

Re: Center Image and Size for Browser Window

Sep 20th, 2009

Troy III,
First let me apologize for posting in the wrong section.

My site is being displayed in a frame by my domain registrar since I am piggybacking onto another site. I went back and tried you first answer using the full URL of the hosted domain and the subsite the image showed up in IE but not when I used the short URL.

However your second solution, even when the doctype is included, works in both IE and FF with the short domain URL.

I had found the fix using the JavaScript code right after you responded but had not tried your second answer until tonight. I like your way of doing it better than the JavaScript since it is smaller and easier to see what is going on. I will be using your second answer in my site.

Thanks again.

P.S. I have found a site that will let you see your site in just about every browser and operating system there is. Check it out at http://browsershots.org/.

•

Join Date: Jun 2007

Posts: 14

Reputation: Mike_H is an unknown quantity at this point

Solved Threads: 0

Mike_H

Offline

Newbie Poster

Re: Center Image and Size for Browser Window

Sep 20th, 2009

Troy III,

I have noticed that if there is no DOCTYPE, your code works great. However, if there is a DOCTYPE, then it does not take into account the height of the inner window loss if there are extra toolbars in both IE and FF. The top of the image gets pushed down cutting off the bottom.

Just I thought I would pass this along.

Again thanks for your help.
Mike_H

•

Join Date: Jun 2008

Posts: 348

Reputation: Troy III will become famous soon enough

Solved Threads: 42

Troy III

Offline

Posting Whiz

Re: Center Image and Size for Browser Window

#10

Sep 20th, 2009

•

Originally Posted by Mike_H

Troy III,

I have noticed that if there is no DOCTYPE, your code works great. However, if there is a DOCTYPE, then it does not take into account the height of the inner window loss if there are extra toolbars in both IE and FF. The top of the image gets pushed down cutting off the bottom.

Just I thought I would pass this along.

Again thanks for your help.
Mike_H

Thanks for your feedback, I already know that issue. That's the only practical reason I removed it and the reason I mentioned it. That code is HTML3.2 compliant, meaning, it will work and behave as expected and is it is backward compatible down to the level of IE 3.x and NN4.x browser generations and future compatible up to the present day and further.

If necessary, I'm positive (but not 100% sure) that using html 3.2 doc-type declaration, will keep it valid and will not interfere with its correct rendering in recent and up-coming UA-s in the future.

Regards.

Last edited by Troy III; Sep 20th, 2009 at 3:27 am.