我已经使用下面的代码来填充整个页面的屏幕。我真正需要的是让它完全填充高度,无所谓它没有完全填充宽度。我只需要将背景图片居中放置在页面中间,页面高度为100%。两边可以有空间,我不介意。当然,我需要保持比例。我试图修改代码,但我不确定我可以这样做。我在这一次失去了一些时间,我相信对于比我更有经验的人来说,这将非常容易。提前感谢您的任何想法。 的代码是在这里:jQuery的背景填充100%的屏幕,但切断了图像的一部分
<img src="http://test.tucado.com/4play/_images/cdj2000-start.jpg" id="bg" alt="">
<a href="home.html"><div id="wheel-enter"><img src="http://test.tucado.com/4play/_images/empty.png" width="100" height="100" /></div></a>
CSS:
body{
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
#cdj2000 {
position:fixed;
top: 50%;
left: 50%;
width:700px;
height:500px;
margin-left: -350px;
margin-top: -250px;
}
#wheel-enter {
position:fixed;
top: 50%;
left: 50%;
width:100px;
height:100px;
margin-top: -50px;
margin-left: -50px;
}
img{
border:none;
}
和jQuery:
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
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");
});
BTW。我不得不把空图像作为按钮,因为某些原因在div没有工作。奇怪的事情。当我为此div添加边框时,它开始工作,但操作仅在边框上......这很奇怪。当然,我不想要一个边框,因为它看起来是被点击的背景的一部分。
的jsfiddle这里:>> jsFiddle <<
谢谢你的任何想法。如果你想保持纵横比,删除,改变宽度行
var theWindow = $(window)
function resizeBg() {
$("#bg").css('width', $('html').outerWidth());
$("#bg").css('height', $('html').outerHeight());
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
:
请使用JSfiddle代码,它会更容易让人们来帮助你。 – Salketer
[链接] http://jsfiddle.net/58MPb/ –
我真正需要的是当屏幕尺寸大于屏幕尺寸时,降低图像高度(并保持比例)。谢谢 –