我使用下面的代码填充页面的整个屏幕。我真正需要的是将它完全填入高度,无论是否没有完全填充宽度。我只需要将背景图片置于页面中间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");
});
顺便说一句。我不得不把空图像作为按钮,因为某些原因在div上没有用。奇怪的是。当我为这个div添加边框时,它开始工作但是行动仅在边界上......这很奇怪。当然我不想要一个边框,因为它假设看起来像要点击的背景的一部分。
jsFiddle这里:>> jsFiddle <<
感谢您的任何想法。
答案 0 :(得分:1)
请使用:
var theWindow = $(window)
function resizeBg() {
$("#bg").css('width', $('html').outerWidth());
$("#bg").css('height', $('html').outerHeight());
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
如果要保持纵横比,请删除更改宽度的行。
答案 1 :(得分:1)
出于某种原因,JSfiddle不起作用,但这里是生成的代码,可以在测试页面上运行:
<style>
body{
height:100%;
width:100%;
margin:0;padding:0;
overflow:hidden;
}
#bg { position: fixed; top: 0; left: 50%;}
.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;
}
</style>
<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>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
$bg
.removeClass()
.addClass('bgheight').css('margin-left',$bg.width()/2*-1);
}
theWindow.resize(function() {
resizeBg();
});
resizeBg();
});
</script>
您无缘无故地在窗口的aspectRatio上进行测试。因为你想要100%的窗口高度,无论发生什么,所以我删除了这部分。为了使图片居中,我使用负边距技巧,将其定位在页面的50%,所以在中间。然后我应用一个相等于调整大小的图片宽度的一半的负magin。
答案 2 :(得分:0)
我相信我已修好它:http://jsfiddle.net/jcolicchio/58MPb/4/
首先,我将JS的第一行更改为:
$(document).ready(function() {
因为它似乎根本没有运行您的代码。你也有一个倒退的不平等标志,也是这样的:
if ( (theWindow.width() / theWindow.height()) > aspectRatio ) {
此处发布的其他解决方案代码更清晰,但对我来说却是一种紧张。