获取使用“background-size：contains”调整大小的背景图像的高度。 [英] Getting the height of a background image resized using "background-size: contain"

问题描述

所以我有一个图像库。每个图像都是跨整个页面的背景图像。

为了确保每个图像使用最大可用宽度，我给它以下background-size：

  background-size：100％auto; 
  

但是，某些图片比可用的屏幕高度高。

为了确保图片完全可见（至少使用滚动条），我需要给予正文 element调整大小的背景图像的高度。

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

这是真的？我必须诉诸于正常的图像元素吗？

有许多方法可以获得静态背景图片的大小，例如如何在jQuery中获取背景图片大小？，但它们显然不适用这里。

解决方案

关键是使用静态图片的尺寸，计算图片的宽高比，然后使用实际元素的尺寸来计算

例如，假设您拥有以下内容：
  html，body {height：100％; } 
 body {
 background-image：url（'http://placehold.it/50x100'）; 
 background-repeat：no-repeat; 
 background-size：100％auto; 
} 
  

静态图片的尺寸为 50x100 ，并且它的大小设置为占据主体元素的宽度 100％。因此， body 元素的宽度将等于调整大小的图像的宽度。如果要计算图像的调整大小的高度，则只需使用图像的宽高比。在这种情况下，因为（400 * 100）/ 50 = 800 p>

此处的示例

  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方法： 此处的示例

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

So I have an image gallery. Each image is a background-image that stretches across the entire page.

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 body element the height of the resized background image.

However, there seems to be no way to get hold of the resized background image's height in 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 static background image, like How do I get background image size in jQuery? but they obviously don't apply here.

解决方案

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 body element'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

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

Pure JS approach: 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();

The pure JS method is going to be the fastest, as demonstrated by this jsPerf example.

这篇关于获取使用“background-size：contains”调整大小的背景图像的高度。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！