我希望我的背景图像可以像幻灯片放映一样自动变化。但无论浏览器窗口大小如何，我都希望图像填充背景……如果按比例缩小，图像的纵横比不会改变。
这是我正在尝试做的一个示例：
我怎样才能完成这些任务？任何帮助将不胜感激。
【问题讨论】：
标签： javascript html css background-image
使用 CSS3，您将使用 background-size 属性。
background-size: contain;
将图像缩放到最大尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都适合背景定位区域。
Contain 始终在您的视口中适合整个图像，只要背景图像和浏览器窗口的比例不同，就会在上下或左右留下不透明的边框。
background-size: cover;
缩放图像，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。
Cover 总是填满浏览器窗口，在这个过程中剪掉一些头发或耳朵，这是我个人在大多数情况下更喜欢的。您可以使用 background-position 属性控制图像在视口中的对齐方式。
【讨论】：
background-size属性的详细解释。
你不能，至少不像你现在想要的那样。
但是，您可以做的是创建一个 <img>，并使用 css 设置 position:absolute，将其缩放到 100% 宽度并使用 overflow:hidden 从父级裁剪它
【讨论】：
你可以试试 jquery/js 来改变背景图片：
<!doctype html>
<html>
<head>
<title>Width resolution</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-size: 20px;
font-family: arial,helvetica,sans-serif;
font-weight: 700;
color:#eee;
text-shadow: 0px 0px 1px #999;
}
div {
width:auto;
height:340px;
border:#ccc groove 2px;
padding:5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('body').css({'background-color':'#ccc'});
var sw = screen.width;
function wres() {
switch(sw) {
case 1920:
$('div').css({'background':'#192000 url(bg-1920.jpg)'});
$('body').css({'background':'#001920 url(bg-1920.jpg)'});
break;
case 1600:
$('div').css({'background':'#160000 url(bg-1600.jpg)'});
$('body').css({'background':'#001600 url(bg-1600.jpg)'});
break;
case 1280:
$('div').css({'background':'#128000 url(bg-1280.jpg)'});
$('body').css({'background':'#001280 url(bg-1280.jpg)'});
break;
case 1152:
$('div').css({'background':'#115200 url(bg-1152.jpg)'});
$('body').css({'background':'#001152 url(bg-1152.jpg)'});
break;
default:
$('div').css({'background':'#102400 url(bg-1024.jpg)'});
$('body').css({'background':'#001024 url(bg-1024.jpg)'});
}
//alert(rsw);
//$('div').html(rsw);
$('.res').append(' '+sw);
$('div.res').css('width', 1920);
}
//alert(sw);
wres();
});
</script>
</head>
<body>
<h1 class="res">Resolução atual:</h1>
<div class="res">The div</div>
</body>
</html>
您可以为背景创建 CSS 类，并使用 .toggleClass()
【讨论】：
您无法在所有浏览器/版本等中可靠地调整背景图像的大小...
您在 thesixtyone.com 网站上看到的效果是通过将正常的内联图像拉伸到其容器的 100% 来实现的，该容器是一个占位符分区。其他元素然后浮动在这个“背景”分区的顶部。
所以答案不是使用背景图片，而是让图片在占位符中填满屏幕，然后将其他元素放在上面。
【讨论】：