Javascript 背景尺寸：包含，缩放后获取尺寸

在CSS中，我将一个按钮设置为100px x 100px，背景大小为：contain

在javascript中，我将图像应用到我没有高度/宽度（或纵横比）的元素

在javascript中的另一个函数中，我需要能够在该按钮通过contain函数后获取其图像/背景的大小

有没有办法做到这一点（我也可以访问Jquery）

小样本：

<style>
#imageButton{ 
    width: 100px;
    height: 100px;
    background: url("imageURL"); 
    background-size: contain !important; 
}
</style>
<script>
    var imageElem = $('#imageButton')[0];
    console.log($(imageElem).width());
    //100px but need width of image after scaling

</script>

#图像按钮{
宽度：100px；
高度：100px；
背景：url（“imageURL”）；
背景尺寸：包含！重要；
}
var imageElem=$（“#imageButton”）[0]；
log（$（imageElem.width（））；
//100px，但缩放后需要图像宽度

CSS属性

背景大小：包含将图像缩放到最大，以便高度和宽度都适合内部，当然保持相同的纵横比

正如@Teemu所说，背景图像是一种伪元素，你实际上无法引用它。但是我可以向你展示一个解决方法，如何获得真实的图像大小并计算缩放后的背景图像大小

它的工作原理类似于比率和比例，其中：

real\u image\u width是到real\u image\u height正如调整大小的图像\u width是到调整大小的图像\u height

首先，我们需要获得图像的真实大小：

var img = new Image;
img.src = $('#imageButton').css('background-image').replace(/url\(|\)$/ig, "");
var imgW = img.width;
var imgH = img.height;

然后，比较哪个维度最大并计算比例：

var newW, newH;

if(imgW > imgH){
    newW = $('#imageButton').width(); //100;
    newH = imgH / imgW * newW;
}else{
    newH = $('#imageButton').height(); //100
    newW = imgW / imgH * newH;      
}

console.log(newW+':'+newH);

如果图像尚未加载或缓存，它将返回0的大小，解决此问题的一个好方法是使用
.load（）
函数加载图像时获取大小

浏览器在亚像素渲染方面也有所不同，我认为您需要四舍五入到最接近的.5位小数，以获得准确的最安全值（43.7832=>43.5）。使用：
（数学四舍五入（值*2）/2.toFixed（1）

就这样！这是示例。
您在寻找什么？我尝试使用$（imageElem）.width（）和$（imageElem）.height（）获取它，其中imageElem=$（'imageButton'）[0]；注意：imageElem是实际的dom元素而不是jquery元素还有其他原因。@Teemu，这将得到按钮的显示大小，它是100px x x 100px，我需要将图像大小设置为按钮#imageButton{background:url（“imageURL”）；background size:contain！important；}背景图像是一种伪元素，实际上你不能引用它。唯一的接口是给定的CSS。您可以尝试从
document.images
集合中查找背景图像。如果它在那里，你也可以得到一些属性（尽管我还没有测试过）。顺便说一句，你也应该在你的文章中添加上一条评论中的代码和解释。这将大大改善问题。只需查看页面上的document.images库，因为图像是在加载后加载的，它们似乎不在其中（它们也显示在另一个域中）嗯。。我想在Firefox上，$（'#imageButton'）.css（'background-image'）.replace（/url\（|\）$/ig，”）将返回带双引号的值“http://...“（我过去遇到过一个问题）。我现在无法测试它，因为我正在使用手机。但如果是这种情况，您可以将regexp更改为
。这对我很有用。我甚至可以通过将其附加到.resize事件处理程序来动态更改div大小。非常感谢@Mark S