javascript 使用“背景尺寸：包含”调整背景图像的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21127479/
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
Getting the height of a background image resized using "background-size: contain"
提问by Pekka
So I have an image gallery. Each image is a background-imagethat stretches across the entire page.
所以我有一个图片库。每个图像都是background-image横跨整个页面的。
To ensure that every image uses the maximum available width, I give it the following background-size:
为了确保每个图像都使用最大可用宽度，我给它设置了以下背景尺寸：
background-size: 100% auto;
However, some of the images are taller than the available screen height.
但是，某些图像高于可用屏幕高度。
To make sure the image is visible in full (at least using scroll bars), I would need to give the bodyelement the height of the resized background image.
为了确保图像完整可见（至少使用滚动条），我需要为body元素提供调整大小的背景图像的高度。
However, there seems to be no way to get hold of the resized background image's height in JavaScript.
然而，似乎没有办法在 JavaScript 中获得调整大小的背景图像的高度。
Is this true? Do I have to resort to normal image elements after all?
这是真的？毕竟我必须求助于普通的图像元素吗？
There are many approaches to getting the size of a staticbackground image, like How do I get background image size in jQuery?but they obviously don't apply here.
有很多方法可以获取静态背景图像的大小，例如如何在 jQuery 中获取背景图像大小？但它们显然不适用于这里。
回答by Josh Crozier
The key is to use the static image's dimensions, calculate the aspect ratio of the image, and then use the actual element's dimensions to figure out the computed dimensions of the resized image.
关键是使用静态图像的尺寸，计算图像的纵横比，然后使用实际元素的尺寸来计算调整后图像的计算尺寸。
For instance, lets assume you had the following:
例如，假设您有以下内容：
html, body { height:100%; }
body {
background-image: url('http://placehold.it/50x100');
background-repeat: no-repeat;
background-size: 100% auto;
}
The static image's dimensions are 50x100, and it is sized to take up a width of 100%of the body element. Therefore the bodyelement's width would be equal to the resized image's width. If you wanted to calculate the resized height of the image, you would just use the image's aspect ratio. In this case, the image's resized height would be 800px, because (400*100)/50 = 800
静态图像的尺寸为50x100，其大小为占据100%body 元素的宽度。因此body元素的宽度将等于调整大小的图像的宽度。如果您想计算图像调整后的高度，您只需使用图像的纵横比。在这种情况下，图像调整后的高度将为800px，因为(400*100)/50 = 800
var img = new Image();
img.src = $('body').css('background-image').replace(/url\(|\)$/ig, "");
$(window).on("resize", function () {
$('body').height($('body').width() * img.height / img.width);
}).resize();
Pure JS approach: EXAMPLE HERE
纯 JS 方法：示例在这里
var img = new Image();
img.src = window.getComputedStyle(document.body).getPropertyValue("background-image").replace(/url\(|\)$/ig, "");
function resize(){
var bgHeight = document.body.offsetWidth * img.height / img.width;
document.body.style.height = bgHeight + 'px';
}
window.onresize = resize; resize();
The pure JS method is going to be the fastest, as demonstrated by this jsPerf example.
正如这个jsPerf 示例所示，纯 JS 方法将是最快的。
回答by seanwbarker
This worked for me (inside a slider):
这对我有用（在滑块内）：
<!-- CSS -->
<style>
div.img {
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
div.img:nth-of-type(1) {background-image: url('img.jpg');}
div.img:nth-of-type(2) {background-image: url('img.jpg');
}
</style>
<!-- HTML -->
<div class-"img"></div>
<div class-"img"></div>
