我沒有測試,但這應該在邏輯上的工作:
'use strict';
$(document).ready(function(){
var body_w = $('body').css('width').replace('px', '') * 1;
var body_h = $('body').css('height').replace('px', '') * 1;
console.log(body_w + 'x' + body_h);
// Initial check
if (body_w > 1138 && body_h > 825) {
$('body').css({
'-webkit-background-size' : 'cover',
'-moz-background-size' : 'cover',
'-o-background-size' : 'cover'
'background-size' : 'cover'
});
}
$(window).resize(function(){
var body_w = $('body').css('width').replace('px', '') * 1;
var body_h = $('body').css('height').replace('px', '') * 1;
if (body_w > 1138 && body_h > 825) {
$('body').css({
'-webkit-background-size' : 'cover',
'-moz-background-size' : 'cover',
'-o-background-size' : 'cover'
'background-size' : 'cover'
});
}
else {
$('body').css({
'-webkit-background-size' : 'auto',
'-moz-background-size' : 'auto',
'-o-background-size' : 'auto'
'background-size' : 'auto'
});
}
});
});
它做了一個首先檢查它是否應該使用cover
,並在窗口重新調整大小時再次檢查。
不要忘記刪除最初的CSS background-size
,因爲它不再需要。
#home{
background:url('imgs/back01.jpg') no-repeat top left fixed;
width: 1000px;
height: 725px;
}
注意:如果可能,請嘗試升級您的jQuery。我看你使用1.7.2,請嘗試使用1.9.x的
你在這種情況下,需要的是唯一可能的JavaScript中的條件語句。 – 2013-03-07 08:58:02