我正在一个网站上工作，该网站可以在 www.musidoraland.co.uk 上找到。我有四张图片，无论屏幕尺寸如何，我都需要填充背景，并且在它们被拉伸或挤压时仍保持它们的纵横比。但是，我也在使用 javascript 来滚动图像，并发现我试图保持纵横比的任何东西都会停止滚动或者只是不起作用。我真的很感激任何人可能有的任何帮助、建议或建议，并提前感谢您。我的代码是（包含我认为可能有效但无效的javascript）：
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Beauchamp's Corporate offers a unique service for clients wishing to design a special product for their business.">
<title>Beauchamp's Corporate</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="transify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#maximage').cycle({
fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 1000,
timeout: 7000,
prev: '#arrow_left',
next: '#arrow_right'
});
$('#content').transify({opacityOrig:.7});
$('#menu li').transify({opacityOrig:.7});
});
var theWindow = $(window),
$bg = $("#maximage"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
</script>
<body>
<div id="logo" style="position:relative;">
<img src="images/logo8.png" alt="Beauchamp's Corporate" width="300px" style="position:absolute;">
</div>
<div id="cycle-loader">
</div>
<div id="maximage">
<img src="images/luggagelabel5.jpg" alt="" />
<img src="images/wallet2.jpg" alt="" />
<img src="images/luggagelabel4.jpg" alt="" />
<img src="images/coasters2.jpg" alt="" />
</div>
<a href="" id="arrow_left" class="button trans" title="Previous Photo"></a>
<a href="" id="arrow_right" class="button trans" title="Next Photo"></a>
<div id="pages">
<div id="nav">
<ul id="menu">
<li id="product">Our Product</li>
<li id="contact">Contact Us</li>
</ul>
</div>
<div id="content">
<div id="copy">
<div class="page product">
<p>We offer a consultation meeting in which we discuss client requirements, design ideas,
packaging options, budgets, lead times and more...
<br />
We have a number of designs already in production which we can edit & brand with the client logo or...
<br />
Following this initial meeting, we produce product drawings, quotes, source leather samples and materials
specific to this product. Samples can be produced once drawings have been approved by the client.
<br />
Lead times, delivery schedules and product prices are unique to the client and indervidually calculated
according to the specific client reqirements.
<br />
Where possible Beauchamp's aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>
</div>
<div class="page contact">
<p>For further information:
<br />
<em>Email:</em> <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
<br />
<em>Address:</em> 35 Bruton Street, London, W1J 6QY
<br />
<em>Website:</em> <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
<br />
<em>Fashion Accessories Website:</em> <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$.extend(jQuery.easing,
{
easeInOutQuart: function(x, t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t * t + b;
return - c / 2 * ((t -= 2) * t * t * t - 2) + b;
}
});
$(function() {
$('.page').hide();
$('#menu li').click(
function() {
var content_id = $(this).attr('id');
$('#menu li').addClass('off');
$(this).removeClass('off');
if ($('.page').is(':visible'))
{
$('.page').hide();
$('.'+content_id).show();
}
else
{
$('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });
console.log($(this).attr('id'));
$('.'+content_id).show();
}
});
});
$(function() {
var open = false;
$('#maximage').click(
function() {
$('#pages').animate({
height: '40px',
easing: 'easeInOutQuart'
},
function(){
$('.page').hide();
$('#menu li').removeClass('off');
});
});
});
</script>
</body>
</html>
CSS：
body {
margin:0;
padding:0;
background: #FFFFFF;
}
#logo{
width:300px;
height:149px;
margin-left:auto;
margin-right:auto;
margin-top:0px;
}
a.button {
display:block;
width:50px;
height:50px;
margin-top:200px;
opacity: 0.6%;
}
a#arrow_left{
float:left;
background: url('../images/arrowleft1.jpg') no-repeat;
position: relative;
z-index: 100;
}
a#arrow_right{
float:right;
background: url('../images/arrowright1.jpg') no-repeat;
position: relative;
z-index: 100;
}
.trans {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}
#maximage {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
#maximage img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -5000;
}
#pages {
margin:0px;
width:100%;
padding:0px;
bottom:0;
position:fixed;
text-align:center;
height:40px;
}
#pages #content {
margin:0;
font-size: 18px;
}
#content {
width:100%;
padding:0px;
background: url('../images/transparent.jpg') repeat;
overflow:hidden;
}
.product {
padding:0px 0px 0px 0px;
}
.contact {
padding:40px 0px 120px 0px;
}
#nav {
margin:0px auto 0px auto;
width:912px;
padding:0px;
text-align:center;
overflow:hidden;
}
#menu {
clear:both;
width:369px;
margin:0 auto;
}
#menu li {
font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
float:left;
width:auto;
background: #A68538 repeat;
margin-right:0px;
cursor:pointer;
}
#menu li#contact {
margin:0;
border-left: none;
}
li {
background: #A68538;
list-style: none;
border: 1px solid #000000 ;
width:150px;
text-align:center;
padding:10px;
display:inline;
}
#copy {
width:700px;
margin: 0 auto 0 auto;
}
em {
font-style: normal;
font-weight: bold;
}