javascript，获取使用包含属性缩放的背景大小

Posted 2023-02-23

【中文标题】javascript，获取使用包含属性缩放的背景大小

【英文标题】：javascript, get size of a background scaled with contain property

【发布时间】：2017-02-19 01:24:11

【问题描述】：

我在这里看到一些帖子试图回答这个问题，我尝试使用给出的代码作为答案，但无法让它工作，所以我一定做错了什么。基本上我有一个带有 CSS 属性“背景大小：包含”的背景图像的 div。我想获得缩放背景的尺寸。这是我的代码，大部分是从这里的另一篇文章中复制的，其中一些内容已更改以匹配我的 div 名称：

var elem = document.querySelector("#enlarged-inner .image-bg");

函数 getBackgroundSize(elem)

elem = document.querySelector("#enlarged-inner .image-bg");

//get original background size

var computedStyle = getComputedStyle(elem);
var img = new Image;
img.src = computedStyle.backgroundImage.replace(/url\((['"])?(.*?)\1\)/gi, '$2');
var imgW = parseInt(img.width, 10);
var imgH = parseInt(img.height, 10);

//get scaled size

var newW = parseInt(computedStyle.width, 10);
var newH = parseInt(computedStyle.height, 10);
var scaledW = 0;
var scaledH = 0;

    scaledW = imgW / imgH * newH;
    scaledH = imgH / imgW * newW; 

 

window.onresize = function() getBackgroundSize(elem);  

它能够很好地获得背景图像的原始（未缩放）大小，所以我至少知道代码的前半部分是有效的。但是第二部分，重要的部分，似乎没有做任何事情。我一直在通过将测试 div 的 innerhtml 更改为新变量来对其进行测试：

document.getElementById("test").innerHTML = newW + " , " + newH; 

我是 javascript 新手，数学不太好，所以我确定这里可能有些东西我没有正确理解。

编辑：上面的代码已经更新了一点，这里有更多的解释。

所以在这张图片中，蓝色框是一个可伸缩的 div，其中包含带背景的 div。它的高度和宽度由 vh 和 vw 设置。 灰色框代表背景图像本身，其大小设置为包含。在上面更新的代码中，newW 和 newH 给了我蓝色盒子的尺寸，不管它是如何缩放的。 imgW 和 imgH 给了我背景的原始未缩放尺寸。我希望 scaledW 和 scaledH 返回灰色框的缩放大小，但我的数学似乎没有解决。

【参考方案1】：

我想出了一个更简单的方法来实现我想要的。基本上我想做的是有一个 div 里面有一个图像，我可以缩放到任何大小，整个图像总是适合 div （类似于 background-size 包含属性），并且图像会始终保持其原始纵横比。在我的特殊情况下，它不是 div，而是整个窗口的大小，我发现使用 img 标签而不是背景中的图像更容易。代码如下：

function getBackgroundSize(elem) 

elem = document.querySelector("#enlarged-inner img");

var imgW = elem.naturalWidth;
var imgH = elem.naturalHeight;
var newW = window.innerWidth;
var newH = window.innerHeight;

var imgRatio = imgW / imgH;
var newRatio = newW / newH;

var scaledW = 0;
var scaledH = 0;

if (imgRatio > newRatio) 
    scaledW = newW;
    scaledH = imgH * newW / imgW; 
else 
    scaledW = imgW * newH / imgH;
    scaledH = newH; 

document.querySelector("#enlarged-inner img").style.width  = scaledW;
document.querySelector("#enlarged-inner img").style.height = scaledH;

我基本上只是找到了图像的未缩放高度和宽度，以及包含 div 的尺寸（在我的例子中是窗口），然后找到了它们的宽度与高度的比率。我不太擅长数学，但至少在我尝试计算的示例中，如果图像的 W/H 大于窗口的 W/H，则意味着图像的宽度将由窗户。然后通过一些简单的数学运算就可以找到图像的正确高度。

【参考方案2】：

我现在无法对其进行测试，但我认为您正在修改的变量（newW 和 newH）是按值传递的。因此，您实际上并没有更新图像的大小。您可能需要使用这些变量来更新图像的大小，可能使用： img.width = newW等

【讨论】：

问题是 newH 和 newW 实际上并不计算缩放后的高度和宽度。它们只是返回原始的、未缩放的背景大小。

如果用浏览器的控制台调试你的代码，你输入你的getBackgroundSize函数吗？