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所示。

Answer 2

这对我有用（在滑块内）：

<!-- 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>

使用“background-size：contains”调整背景图像的高度

2 个答案: