• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 686
  • Last Modified:

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

0
jbuzzard
Asked:
jbuzzard
2 Solutions
 
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
 
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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now