Javascript 获取背景图像的最终大小

即使应用了

background size

属性，是否有一种简单的方法可以通过Javascript或jQuery获得背景图像的最终高度和宽度

我的意思是，我知道我可以获取背景图像url并将其加载到

图像

对象，然后获取宽度和高度。但这是源图像的大小。如果有人用CSS缩放它，那么大小就会改变

我怎样才能找到它的最终尺寸

@编辑

它与标记为相似的问题不同，因为它没有说明如何获得像素大小。如果有人使用JSFIDLE更改背景大小，我发现更改容器的高度或宽度会迫使图像缩放到最大高度或宽度。这意味着背景的一个边缘的测量值将等于容器的一个尺寸。使用这个和一些比例，我们可以计算图像的尺寸

// let .container  represent element containing the image
var image; // the image object to the background image
var dim_h, dim_w; // the height and width of the actual image


height = $(".container").height();
width = $(".container").width();

if (height >= width)
{
  dim_h = height;
  dim_w = (height / image.height) * image.width;
}
else
{
  dim_w = width;
  dim_h = (width / image.width) * image.height;
}

// dim_w and dim_h contain the width and height of the actual 
// background image after scaling

上面的代码使用下面的比例来计算它

(element_height / image_height) == (element_width / image_width)

我想它应该会给你想要的答案。

使用，我创建了这个脚本，它返回给定元素背景的宽度和高度（以像素为单位）。它适用于：

• 尺寸（宽度或高度）设置为

  auto

  ，可以是显式的，也可以是因为没有给定特定值（宽度和高度默认为

  auto

  ）
• 维度设置为百分比

  %

• 尺寸设置为像素

  px

• 将尺寸设置为上一个尺寸的组合。（即

  宽度：100px；高度：自动或
  宽度：自动；高度：32.4%
  或
  高度：100px；宽度：2%
  或
  宽度：21.2%
  ）

• 背景尺寸

  设置为

  封面

  或

  包含

如果使用外部CSS文件、内联CSS、内联页眉CSS设置了

背景大小

，或者根本没有设置它（意味着宽度和高度是

自动的

），则它可以工作

下面是一个JSFIDLE（附封面示例）

这是StackOverflow的代码片段（带有

自动百分比

单位）

函数getBackgroundSize（elem）{
//这：
//*获取元素计算样式：
//-CSS背景大小
//-元件的宽度和高度
//*提取背景URL
var computedStyle=getComputedStyle（元素），
image=新图像（），
src=computedStyle.backgroundImage.replace（/url\（['“]）？（.*？\1\）/gi，$2'），
cssSize=computedStyle.backgroundSize，
elemW=parseInt（computedStyle.width.replace（'px'，''），10），
elemH=parseInt（computedStyle.height.replace（'px'，''），10），
elemDim=[elemW，elemH]，
computedDim=[]，
比率
//使用提取的URL加载图像。
//应该已经在缓存中了。
image.src=src；
//确定“比率”
比率=image.width>image.height？image.width/image.height:image.height/image.width；
//将背景大小属性拆分为数组
cssSize=cssSize.split（“”）；
//第一个属性是宽度。它总是设置为某个值。
computedDim[0]=cssSize[0]；
//如果未设置高度，请将其设置为“自动”
computedDim[1]=cssSize.length>1？cssSize[1]：“自动”；
如果（cssSize[0]=='覆盖'）{
//宽度大于高度
if（elemDim[0]>elemDim[1]）{
//元素比率大于或等于img比率
if（elemDim[0]/elemDim[1]>=比率）{
computedDim[0]=elemDim[0]；
computedDim[1]=“自动”；
}否则{
computedDim[0]=“自动”；
computedDim[1]=elemDim[1]；
}
}否则{
computedDim[0]=“自动”；
computedDim[1]=elemDim[1]；
}
}else if（cssSize[0]='contain'）{
//宽度小于高度
if（elemDim[0]=比率）{
computedDim[0]=“自动”；
computedDim[1]=elemDim[1]；
}否则{
computedDim[1]=“自动”；
computedDim[0]=elemDim[0]；
}
}
}否则{
//如果不是“覆盖”或“包含”，则循环遍历这些值
对于（var i=cssSize.length；i--；）{
//检查值是否以像素或百分比为单位
if（cssSize[i].indexOf（'px'）>-1）{
//如果以像素为单位，只需删除“px”即可获得值
computedDim[i]=cssSize[i]。替换（'px'，''；
}else if（cssSize[i].indexOf（'%'）>-1）{
//如果为百分比，则获取元素维度的百分比
//并将其指定给计算的维度
computedDim[i]=elemDim[i]*（cssSize[i].替换（'%，''）/100）；
}
}
}
//如果两个值都设置为“自动”，则返回图像的
//原始宽度和高度
if（computedDim[0]=='auto'&&computedDim[1]=='auto'）{
computedDim[0]=image.width；
computedDim[1]=image.height；
}否则{
//根据“宽度”或“高度”是自动的，
//计算“自动”的像素值。
//这里的比例只是比例。
比率=计算尺寸[0]=“自动”？image.height/computedDim[1]：image.width/computedDim[0]；
computedDim[0]=computedDim[0]=“自动”？图像宽度/比率：computedDim[0]；
computedDim[1]=computedDim[1]=“自动”？图像高度/比率：computedDim[1]；
}
//最后，返回一个对象，该对象的宽度和高度为
//背景图像。
返回{
宽度：computedDim[0]，
身高：c