Javascript 背景图像缩放，同时保持纵横比
我希望我的背景图像像幻灯片一样自动改变。但我希望无论浏览器窗口大小如何，图像都能填充背景…如果缩小，图像的纵横比不会改变 下面是我尝试做的一个例子：Javascript 背景图像缩放，同时保持纵横比,javascript,html,css,background-image,Javascript,Html,Css,Background Image,我希望我的背景图像像幻灯片一样自动改变。但我希望无论浏览器窗口大小如何，图像都能填充背景…如果缩小，图像的纵横比不会改变 下面是我尝试做的一个例子： 我怎样才能完成这些任务？任何帮助都将不胜感激。您无法跨所有浏览器/版本等可靠地调整背景图像的大小 您在SixtyOne.com网站上看到的效果是通过将普通内联图像拉伸到其容器（占位符分区）的100%来实现的。其他元素则漂浮在“背景”部分的顶部 因此，答案不是使用背景图像，而是让图像在占位符中填充屏幕，然后将其他元素放在上面。对于CSS3，您将使用
我怎样才能完成这些任务？任何帮助都将不胜感激。您无法跨所有浏览器/版本等可靠地调整背景图像的大小 您在SixtyOne.com网站上看到的效果是通过将普通内联图像拉伸到其容器（占位符分区）的100%来实现的。其他元素则漂浮在“背景”部分的顶部
因此，答案不是使用背景图像，而是让图像在占位符中填充屏幕，然后将其他元素放在上面。对于CSS3，您将使用
背景大小背景尺寸：包含
缩放图像，同时保留其固有的纵横比（如果有），使其最大尺寸，以便其宽度和高度都能适合背景定位区域
Contain
始终适合视口中的整个图像，只要背景图像和浏览器窗口的比率不相同，就在上下或左右两侧保留不透明边框
背景尺寸：封面
缩放图像，同时保留其固有的纵横比（如果有），使其尺寸最小，以便其宽度和高度都可以完全覆盖背景定位区域
Cover
总是填满浏览器窗口，在这个过程中剪掉一些头发或耳朵，这是我个人最喜欢的情况。您可以使用“背景位置”属性来控制图像在视口中的对齐方式。您不能，至少不像您现在尝试的那样
但是，您可以做的是创建一个
，并使用css设置位置：绝对
，将其缩放到100%宽度，然后使用溢出：隐藏
从父级裁剪它
示例：您可以尝试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>
宽度分辨率
身体{
字体大小：20px；
字体系列：arial、helvetica、无衬线字体；
字号：700；
颜色：#eee；
文本阴影：0px 0px 1px#999；
}
div{
宽度：自动；
高度：340px；
边框：#ccc槽2px；
填充物：5px；
}
$（文档）.ready（函数（）{
$（'body'）.css（{'background-color'：'#ccc'}）；
var sw=屏幕宽度；
函数wres（）{
开关（sw）{
案例1920：
$（'div'）.css（{'background'：'192000 url（bg-1920.jpg）}）；
$（'body'）.css（{'background'：'#001920 url（bg-1920.jpg）}）；
打破
案例1600：
$（'div'）.css（{'background'：'160000 url（bg-1600.jpg）}）；
$（'body'）.css（{'background'：'001600 url（bg-1600.jpg）}）；
打破
判例1280：
$（'div'）.css（{'background'：'#128000 url（bg-1280.jpg）}）；
$（'body'）.css（{'background'：'001280 url（bg-1280.jpg）}）；
打破
案例1152：
$（'div'）.css（{'background'：'115200 url（bg-1152.jpg）}）；
$（'body'）.css（{'background'：'001152 url（bg-1152.jpg）}）；
打破
违约：
$（'div'）.css（{'background'：'#102400 url（bg-1024.jpg）}）；
$（'body'）.css（{'background'：'001024url（bg-1024.jpg）}）；
}
//警报（rsw）；
//$（'div'）.html（rsw）；
$（'.res'）。追加（''+sw）；
$（'div.res'）.css（'width'，1920）；
}
//警报（sw）；
鹪鹩（）；
});
决议草案：
潜水艇
您可以为背景创建CSS类，并使用.toggleClass（）以及如何让它位于我页面上所有其他元素的后面？z值？您的示例是在调整浏览器大小时拉伸图像的宽度（更改纵横比）。我不希望纵横比改变…就像我上面链接的例子一样。纵横比没有改变。它按比例拉伸宽度和高度。如果你使用高分辨率的图像，它看起来会很好，我只是用了一个低分辨率的谷歌徽标：）好的，最后一个问题……为什么它没有填满整个页面，只有那个薄矩形框？我怎样才能修复它，让它填满整个页面？这就是我的div有多高。。。我更新了示例，感谢您对背景大小
属性的详细解释。对于那些好奇的人，请访问此选项的caniuse页面。考虑到这一点，自2011以来，事情就已经开始了。CSS3允许通过背景大小进行此操作。注意：链接中的网站在2014-07。正如@drudge在背景图片下面提到的：包含是实现此效果所需的全部。刚刚意识到我在上面的评论中的错误。。。您要使用背景图像：封面。IOS Safari的2个已知问题当您可以简单地使用css媒体查询时，为什么要使用js？