asked on

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

SOLUTION

James Murrell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER CERTIFIED SOLUTION

Andreaspisc

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

jbuzzard

ASKER

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?

scrathcyboy

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.

jbuzzard

ASKER

Cool, Thanks!

Andreaspisc

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.