我有一個問題。 我想要一個寬度爲100%窗口的div
容器中的背景圖像。 我希望它在變焦時發生變化,當我調整窗口大小時它應該調整大小。jQuery的背景圖像縮放或窗口調整大小
這裏是我的嘗試:
var imageWidth = 1024;
var imageHeight = 600;
$(document).ready(function(){
jQuery(window).resize(function(){
resizeImage();
api.reinitialise();
}
}
$(window).resize(function() {resizeImage()});
function resizeImage() {
var navWidth = jQuery(window).width();
var navHeight = jQuery(window).height();
var navRatio = navWidth/navHeight;
var imageRatio = imageWidth/imageHeight;
if (navRatio > imageRatio) {
var newHeight = (navWidth/imageWidth) * imageHeight;
var newWidth = navWidth;
} else {
var newHeight = navHeight;
var newWidth = (navHeight/imageHeight) * imageWidth;
}
var newTop = 0 - ((newHeight - navHeight)/2);
var newLeft = 0 - ((newWidth - navWidth)/2);
$('#image').css({height: navHeight, width: navWidth});
$('#image img').css({height: newHeight, width: newWidth, top: newTop, left: newLeft});
$('#image').css({visibility:"visible", display:"block"});
}
img { border:0px; }
html { height:100%; }
body { width: 100%; height: 100% ; text-align:left; font: normal 12px Arial}
div#image {position:fixed; z-index:98; display:block;}
div#image img {overflow:hidden; position:absolute; z-index:99;}
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<div id="image"><img src="http://www.cdelit.com/images/rocketlauncher/frontpage/showcase/img2.png" alt="" /></div>
</body>
現在的問題是,該圖像調整到錯誤的大小。
問題是什麼/問題? –