0
我正在一個可以在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="[email protected]">[email protected]</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;
}
謝謝你，這是完美的 - 關研究爲何以及如何！再次感謝你！ – BWCub
查看它，.66625做什麼？我無法工作那麼多？再次感謝您，Cub – BWCub
.66625是您的圖像的長寬比。你可以通過分割圖像的高度/寬度來得到它。 533/800 = .66625顯然你應該爲這個值設置一個變量，我只是硬編碼進行測試。 – user1289347