Javascript 在保持纵横比的同时缩放背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5559764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Background Image Scaling While Maintaining Aspect Ratio
提问by Sev
I would like to have images for my background that change automatically like a slide show. But I would like the images to fill the background no matter what size the browser window is...and if it is scaled down, the aspect ratio of the image does not change.
我想让我的背景图像像幻灯片一样自动变化。但是，无论浏览器窗口的大小如何，我都希望图像填充背景......如果缩小，图像的纵横比不会改变。
Here is an example of what I'm trying to do:
这是我正在尝试做的一个例子：
How can I accomplish these tasks? Any help will be much appreciated.
我怎样才能完成这些任务？任何帮助都感激不尽。
采纳答案by Mark Kahn
You can't, at least not like you are trying to now.
你不能，至少不像你现在尝试的那样。
What you can do, however, is create an <img>instead, and with css set position:absolute, scale it to 100% width and crop it from the parent with overflow:hidden
但是，您可以做的是创建一个<img>，并使用 css set 将其position:absolute缩放到 100% 宽度并从父级裁剪它overflow:hidden
example: http://jsfiddle.net/GHmz7/4/
回答by drudge
With CSS3, you would use background-sizeproperty.
使用 CSS3，您将使用background-size属性。
background-size: contain;Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
background-size: contain;将图像缩放到最大尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都适合背景定位区域。
Containalways fits the entire image within your viewport, leaving opaque borders on either the top-bottom or the left-right whenever the ratio of the background image and browser window are not the same.
Contain始终适合您的视口中的整个图像，只要背景图像和浏览器窗口的比例不同，就会在上下或左右留下不透明的边框。
background-size: cover;Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
background-size: cover;将图像缩放到最小尺寸，同时保留其固有纵横比（如果有），使其宽度和高度都可以完全覆盖背景定位区域。
Coveralways fills the browser window, cutting off some hair or ears in the process, which is what I personally prefer for most cases. You can control how your image is aligned within the viewport by using the background-position property.
Cover总是填满浏览器窗口，在此过程中剪掉一些头发或耳朵，这是我个人在大多数情况下更喜欢的。您可以使用 background-position 属性控制图像在视口内的对齐方式。
回答by msmafra
You could try jquery/js to change the background image:
您可以尝试使用 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>
You can create CSS classes for the backgrounds instead, and use .toggleClass()
您可以改为为背景创建 CSS 类，并使用 .toggleClass()
回答by Billy Moon
You can not reliably resize background images across all browsers/versions etc...
您无法在所有浏览器/版本等中可靠地调整背景图像的大小...
The effect you see on thesixtyone.com site is achieved by stretching a normal inline image to 100% of it's container which is a placeholder division. Other elements are then floated over the top of this 'background' division.
您在 thesixtyone.com 网站上看到的效果是通过将普通内联图像拉伸到其容器的 100% 来实现的，这是一个占位符分割。然后其他元素浮动在这个“背景”分区的顶部。
So the answer is not to use a background image, but to make an image fill the screen in a placeholder, then put other elements on top of it.
所以答案不是使用背景图像，而是让图像在占位符中填满屏幕，然后将其他元素放在它上面。
