Help with code to stretch image according to browser window size

Hi Guys,

I'm currently helping a mate do a website, and I've been working on the placeholder. I've got a nice little slideshow working above a main logo - the main logo is massive and meant to be that way.
I'm having a few problems though:
I cannot get the slideshow div to centre screen properly, which I think is related to the face that I can't get the main logo (1605px wide) to fit to variable screen widths.
Along side that, I want to get the bottom text to centre as well.

I know I can CSS to get most of the stuff centred, but what I'm wondering is what I can do to get the main logo (iskifortommy) to stretch to window size? I've seen some bad code to do it, so I'm wondering whether anyone has any better code out there.

Also, any advice on the rest of the code would be helpful.

I'm a techie, but just not a coder... And trying to help a friend for a good cause.

Cheers.
<?php
/*
Template Name: Placeholder Page
*/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>i ski for tommy.</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
	$('.fadein img:gt(0)').hide();
	setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 6000);
});
</script>

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'x']);
  _gaq.push(['_trackPageview']);
  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

<style type="text/css">
<!--
.style1 {
	font-family: "Cooper Black";
	font-weight: bold;
	font-size: x-large;
}
.style4 {color: #011230}
.style5 {color: #fe0000}
-->
.fadein {
	position:relative;
	width:1605px;
	height:332px;
}
.fadein img {
	position:absolute;
	left:650px;
	top:0;
}
</style>

</head>
<body>
<div class="fadein">
  <img src="http://iskifortommy.com/wp-content/uploads/2010/04/iskifortommyphoto.jpg">
  <img src="http://iskifortommy.com/wp-content/uploads/2010/04/tom21.jpg">
  <img src="http://iskifortommy.com/wp-content/uploads/2010/04/tom75.jpg">
</div>

<br/><br/><br/><br/><br/><br/><br />
<div align="center"><img class="aligncenter" title="i ski for tommy." src="http://iskifortommy.com/wp-content/uploads/2010/04/iskifortommyredux.jpg" alt="i ski for tommy." width="1605" height="170" /></div>
<p class="style1" style="text-align: center;"><span class="style4">dropping</span> <span class="style5">soon...</span></p>
</body>
</html>

Open in new window

LVL 2
jbuzzardAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

James MurrellProduct SpecialistCommented:
0
AndreaspiscCommented:
I would leave out the
   height="100%" since it doesn't add anything.  The important thing is to let the width vary with the window size as cs97jjm3 did.  If you leave your fixed height in the text will look a bit odd on very narrow windows.

To get the three pictures centred you need to change your .facein styles:

.fadein {overflow:hidden;
      height:453px;
}
.fadein img {display:block;
      margin-left:auto; margin-right:auto;
}

The overflow:hidden just cuts down on annoying flicker as the pictures change.  I've changed the height to the height of your tallest image, so you probably want to remove all but one of your <br/>s, or even remove them all and use a margin on the following div.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jbuzzardAuthor Commented:
Thanks guys,
perfect as always - the stretch is exactly what I wanted.
However, quick question - is there anyway of defining a maximum stretch size? ie, if the person ends up using a dual screen setup, making sure that the maximum width is only 1600px or so?
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

scrathcyboyCommented:
You don't really need to.  Most dual screen setups only let an app that is assigned to one screen stay on that screen.  In most cases it won't spill to the second monitor unless the app is assigned to that monitor.
0
jbuzzardAuthor Commented:
Cool, Thanks!
0
AndreaspiscCommented:
Just add
   style="max-width:1600px"
to the "i ski for tommy" image to ensure that it won't stretch to wider than 1600 pixels.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.