Center Image and Size for Browser Window

Question

Mike_H 0 Light Poster

15 Years Ago

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.

<!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 [url]www.DragonQuest.com[/url]

	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>

web-design

Edited 15 Years Ago by Mike_H because: fix code tags

5 Contributors
12 Replies
366 Views
2 Weeks Discussion Span
Latest Post 15 Years Ago Latest Post by MidiMagic

Enthused 0 Newbie Poster

15 Years Ago

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

<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 :)

Edited 15 Years Ago by Enthused because: n/a

Troy III 272 Posting Pro

15 Years Ago

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.

<!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 [url]www.DragonQuest.com[/url]

	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,

<!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.

Troy III 272 Posting Pro

15 Years Ago

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:

<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.

Edited 15 Years Ago by Troy III because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Mike_H 0 Light Poster · Answer 1 · 2009-09-09T21:26:47+00:00

Mike_H 0 Light Poster

15 Years Ago

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

Troy III commented: this is for lying on the open and for never confirming that my solution works better than you've ever dreamed it would +0

Mike_H 0 Light Poster · Answer 2 · 2009-09-20T03:18:17+00:00

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.

Troy III 272 Posting Pro · Answer 3 · 2009-09-20T03:27:09+00:00

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...

Mike_H 0 Light Poster · Answer 4 · 2009-09-20T11:05:44+00:00

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/.

Mike_H 0 Light Poster · Answer 5 · 2009-09-20T12:06:27+00:00

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

Troy III 272 Posting Pro · Answer 6 · 2009-09-20T12:25:58+00:00

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.

sandwitch_ro 0 Newbie Poster · Answer 7 · 2009-09-24T14:32:23+00:00

Ok I was lucky enough to find troy's solutions through a random search and it works for me. However, any idea how to keep the image proportional? it gets distorted now on an window resize.

sandwitch_ro 0 Newbie Poster · Answer 8 · 2009-09-24T14:35:20+00:00

sandwitch_ro 0 Newbie Poster

15 Years Ago

never mind, problem solved, and my mistake.

MidiMagic 579 Nearly a Senior Poster · Answer 9 · 2009-09-26T11:12:08+00:00

The problem is that vertical centering can not be done in a way that works on all computers, browsers, screen resolutions, screen aspect ratios, browser configurations, and current browser window size and ratio. Anything that works uses some kind of kludge that may stop working with any software update. The introduction of the 16 x 9 screen killed off most of the methods that used to work.

The World Wide Web was never designed to allow vertical centering. Web pages are not supposed to index to the browser window, but are supposed to start at the top and grow down until the content is exhausted.

People should realize that attempts to center vertically are an abuse of the WWW and W3C intent, and should stop trying. Entirely too much time and effort has been wasted on this. A web page is a document, not a screen.