javascript - 使用 "background-size: contain"获取调整大小的背景图像的高度

Question

所以我有一个图片库。每张图片都是一个横跨整个页面的 background-image。

为确保每张图片都使用最大可用宽度，我为其指定了以下背景尺寸:

background-size: 100% auto;

但是，有些图像的高度超过了可用的屏幕高度。

为了确保图像完整可见(至少使用滚动条)，我需要为 body 元素提供调整后的背景图像的高度。

但是，似乎没有办法在 JavaScript 中获取调整后的背景图像的高度。

这是真的吗？毕竟我必须求助于普通图像元素吗？

有很多方法可以获取静态 背景图像的大小，例如How do I get background image size in jQuery?但它们显然不适用于此。

Answer 1

关键是使用静态图像的尺寸，计算图像的纵横比，然后使用实际元素的尺寸计算出调整后图像的计算尺寸。

例如，假设您有以下内容:

html, body { height:100%; }
body {
    background-image: url('http://placehold.it/50x100');
    background-repeat: no-repeat;
    background-size: 100% auto;
}

静态图像的尺寸为 50x100，它的大小占据了 body 元素的 100% 宽度。因此，body 元素的宽度将等于调整后图像的宽度。如果您想计算图像调整后的高度，您只需使用图像的纵横比即可。在这种情况下，图像调整后的高度将为 800px，因为 (400*100)/50 = 800

EXAMPLE HERE

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();

纯 JS 方法:EXAMPLE HERE

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();

纯 JS 方法将是最快的，正如这个 jsPerf example 所证明的那样.