Javascript 填充屏幕和滚动时图像的纵横比

我在一个网站上工作，该网站可以在www.musidoraland.co.uk上找到。我有四张图片，无论屏幕大小如何，我都需要填充背景，并且在它们被拉伸或挤压时仍然保持它们的纵横比。然而，我也在使用javascript来滚动图像，发现任何我试图保持纵横比的东西都会停止滚动，或者根本不起作用。 我非常感谢任何人提供的任何帮助、建议或建议，并提前向您表示感谢。 我的代码是（包含javascript，我认为可能有效，但没有）：

Html:

试试这个，它应该也可以调整大小，但它会在调整大小时重新启动幻灯片

以下是主要的变化

$(document).ready(function() {
    if ($(window).width() * .66625 < $(window).height()) {
    $('#maximage').cycle({
        fx: 'scrollHorz', 
        speed: 1000,
        timeout: 7000,
        width: $('#maximage').width(),
        height: $('#maximage').width() * .66625,
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    } else {
    $('#maximage').cycle({
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 7000,
        width: $('#maximage').height() / .66625,
        height: $('#maximage').height(),
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    }
    if ($(window).width() > $('#maximage').width()) {
        $('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
    }

$（文档）.ready（函数（）{
如果（$（窗口）.width（）*.66625<$（窗口）.height（））{
$（'#最大值'）。循环({
fx:‘滚动人’，
速度：1000，
超时：7000，
宽度：$（'#最大值'）。宽度（），
高度：$（“#最大值”）.width（）*.66625，
适合：1，
上一页：“#箭头左”，
下一步：“#向右箭头”
});
}否则{
$（'#最大值'）。循环({
fx:‘滚动人’，
速度：1000，
超时：7000，
宽度：$（'#最大值'）。高度（）/.66625，
高度：$（'#最大值'）。高度（），
适合：1，
上一页：“#箭头左”，
下一步：“#向右箭头”
});
}
如果（$（窗口）.width（）>$（'#最大值'）.width（））{
$（'#maximage'）.css（{'left'：（$（window.width（）-$（'#maximage'）.width（））/2）+'px'}）；
}

及

函数resizeBg（）{
$（'#maximage'）。循环（'destroy'）；
如果（$（窗口）.width（）*.66625<$（窗口）.height（））{
$（'#最大值'）。循环({
fx:‘滚动人’，
速度：1000，
超时：7000，
宽度：$（窗口）.width（），
高度：$（窗口）.width（）*.66625，
适合：1，
上一页：“#箭头左”，
下一步：“#向右箭头”
});
}否则{
$（'#最大值'）。循环({
fx:‘滚动人’，
速度：1000，
超时：7000，
宽度：$（窗口）.height（）/.66625，
高度：$（窗口）。高度（），
适合：1，
上一页：“#箭头左”，
下一步：“#向右箭头”
});
}
如果（$（窗口）.width（）>$（'#最大值'）.width（））{
$（'#maximage'）.css（{'left'：（$（window.width（）-$（'#maximage'）.width（））/2）+'px'}）；
}
}
$（窗口）。调整大小（函数（）{
resizeBg（）；
}).触发（“调整大小”）；

谢谢，这是研究原因和方式的完美选择！再次感谢！看看它，.66625是做什么的？我无法计算出那一点？再次感谢你，Cub.66625是图像的纵横比。你可以通过除以图像高度/宽度得到它。533/800=.66625显然你应该为该值设置一个变量，我刚刚为t硬编码了它测试。

    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;
}

$(document).ready(function() {
    if ($(window).width() * .66625 < $(window).height()) {
    $('#maximage').cycle({
        fx: 'scrollHorz', 
        speed: 1000,
        timeout: 7000,
        width: $('#maximage').width(),
        height: $('#maximage').width() * .66625,
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    } else {
    $('#maximage').cycle({
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 7000,
        width: $('#maximage').height() / .66625,
        height: $('#maximage').height(),
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    }
    if ($(window).width() > $('#maximage').width()) {
        $('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
    }

function resizeBg() {
        $('#maximage').cycle('destroy');
        if ($(window).width() * .66625 < $(window).height()) {
    $('#maximage').cycle({
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 7000,
        width: $(window).width(),
        height: $(window).width() * .66625,
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    } else {
    $('#maximage').cycle({
        fx: 'scrollHorz',
        speed: 1000,
        timeout: 7000,
        width: $(window).height() / .66625,
        height: $(window).height(),
        fit: 1,                
        prev: '#arrow_left',
        next: '#arrow_right'
    });
    }
    if ($(window).width() > $('#maximage').width()) {
        $('#maximage').css({'left': (($(window).width() - $('#maximage').width()) / 2) + 'px'});
    }


    }

    $(window).resize(function() {
        resizeBg();
    }).trigger("resize");