我已经在我的第一个网站上工作了一段时间。我有 CSS 工作，但我仍然需要解决一些简单但不是那么简单的问题。在索引.html文件中，我有一个背景图片附加到 html。所以我有一个全屏背景图片通过 CSS 附加到 html 标签。这是 CSS 代码：
html{ background: no-repeat center center fixed;
-webkit-background-size: cover; -moz-background-size: cover;
-o-background-size: cover; -ms-background-size: cover;
background-size: cover; }
但是我正在通过Javascript加载图片。我的目标是拥有一组图片，每次用户加载网站或触发网站时，都会显示一张随机图片。所以我在 Javascript 中有这段代码，它正在工作：
$(document).ready(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
$("html").css({
background: "url(_img/bg/index_rnd/" + randomImages[rndNum] + ".jpg)
no-repeat"
});
});
所有这些代码都在工作。图片从数组中选择，并在加载后随机显示。但是我有一个很大的问题，我找不到一个明确的答案，我被困住了。我希望宽度和高度都已调整，因此整个图片显示在屏幕上。当然，每个屏幕都是不同的...我读了一些关于内宽和内宽属性的东西，但我不知道如何进行。我应该怎么做才能将图片调整为每个不同的屏幕？
此时，图片的分辨率为1024x683。我有一台屏幕为 15"、分辨率为 1440x900 的计算机。我的照片总是变得更加像素化，并且显示高度很长，因此剪切了图片的一部分。
问题：
我应该怎么做才能将图片调整为每个不同的屏幕分辨率？
建议的图片分辨率，以便图片正确显示？
有没有办法将图片显示成屏幕的确切大小？即使它的原始格式被修改了一点？
收到答复后回复-------------------------------------------------------------新问题-----------------------------------------------------------------------------
您好，我终于有时间使用代码了...它确实可以正常工作。我只需要将网址添加到我的图像文件夹和魔法中!!所以我的代码实际上是这样的：
$(window).load(function() {
var randomImages = ['img1','img2','img3','img4','img5'];
var rndNum = Math.floor(Math.random() * randomImages.length);
var $win = $(this);
var $img = $('#background').attr('src', '_img/bg/index_rnd/' + randomImages[rndNum] + '.jpg').css({'position':'fixed','top':0,'left':0});
function resize() {
if (($win.width() / $win.height()) < ($img.width() / $img.height())) {
$img.css({'height':'100%','width':'auto'});
} else {
$img.css({'width':'100%','height':'auto'});
}
}
$win.resize(function() { resize(); }).trigger('resize');
});
关于我的html，我现在有一个带有id背景的图像。我想按照所说的方式将图像居中。所以我的问题是我是否应该把这个图像放在一个div中。如果是这样，我怎样才能使这个图像中心本身位于屏幕的中心???
另一个问题，在我把我的图像附加到html之前，现在附加到图像上。因此，图像正在影响我体内的其他元素。我怎样才能使这个图像显示在我身体的所有其他元素后面?!?!例如，当我的img id="background"加载时，我的徽标和header_bg被转换。
你能帮忙吗???
这是我有任何疑问的 html...
<body>
<img id="background" src="" alt="" />
<div id="header_img">
<nav>
<div id="header-bg-left">
<div id="nav-content">
<div id="logo">
<a href="index.html"><img alt="./_img/nav/logo.rosa.png" src="">logo</a>
</div>
<div id="categories">
<ul>
<li id="nav-quien"><a href="#">quien es</a>
<ul>
<li id="nav-biografia" class="drop1"><a href="biografia.html">biografia</a></li>
<li id="nav-curriculum" class="drop2"><a href="curriculum.html">curriculum</a></li>
</ul>
</li>
<li id="nav-galeria" class="marginli"><a href="gallery.html">galeria</a>
<ul>
<li id="nav-gal-nat" class="drop3"><a href="gallery.html">paisaje natural</a></li>
<li id="nav-gal-urb" class="drop4"><a href="gallery.html">paisaje urbano</a></li>
</ul>
</li>
<li id="nav-prensa" class="marginli"><a href="prensa.html">prensa</a></li>
<li id="nav-links" class="marginli"><a href="links.html">links</a></li>
<li id="nav-contacto" class="marginli"><a href="contacto.html">contacto</a></li>
</ul>
</div>
</div>
</div>
</nav>
</div>
<footer>
<div id="footer-bg-left">
<div id="foot-content">
<p>Diseñado por <a href="mailto:daniramirezescudero@gmail.com">Daniel. R-Escudero</a> <span>|</span> Todos los derechos reservados <span>|</span> <a href="mailto:info@scalesplanet.com">info@rosasusaeta.com</a> <span>|</span><a href="http://www.linkedin.com/"><img src="./_img/footer/logo.linked.png"></a> <a href="http://www.facebook.com/"><img src="./_img/footer/logo.facebook.png"></a></p>
</div>
</div>
</footer>
</body>
2012 年 11 月 29 日
- 演示：http://so.devilmaycode.it/height-and-width-of-background-picture-adapt-to-each-screen-size/
$(window).resize(function() {
resize();
});
$(function() {
$('#background').attr('src', 'http://cdn.com/bg.png').css({
'position' : 'fixed',
'top' : 0,
'left' : 0
});
resize();
});
function resize() {
var $img = $('#background');
if (($(window).width() / $(window).height()) < ($img.width() / $img.height())) {
$img.css({
'height' : '100%',
'width' : 'auto'
});
} else {
$img.css({
'width' : 'auto',
'height' : $(window).height() + 'px'
});
}
}
<body>
<img id="background" src="" alt=""/>
</body>