获取背景图像的最终大小

有没有一种简单的方法可以使用Javascript或jQuery获取背景图像的最终高度和宽度，即使应用了background-size属性？

我的意思是，我知道我可以获取背景图像URL并将其加载到Image对象，然后获取宽度和高度。 但它是源图像的大小。 如果有人用CSS缩放它，那么大小就会改变

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

@编辑

它与标记为类似的问题不同，因为它没有说如果有人改变了background-size大小，如何获得像素background-size

Answer 1

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

• 尺寸（宽度或高度）设置为auto ，显式或因为没有给出特定值（宽度和高度默认为auto ）
• 尺寸设置为百分比%
• 尺寸设置为像素px
• 尺寸设置为以前任何一种的组合。 （ 即 width: 100px; height: auto 或 width: auto; height: 32.4% 或 height: 100px; width: 2%或width: 21.2% ）
• background-size设置为cover或contain

如果使用外部CSS文件 ， 内联CSS ， 内联标题CSS或者根本没有设置 （意味着宽度和高度为auto ），则设置background-size 。

这是一个JsFiddle（有封面示例）

http://jsfiddle.net/gp4e9d3z/3/

这里是StackOverflow的代码片段（ percentage auto单位percentage auto ）

 function getBackgroundSize(elem) { // This: // * Gets elem computed styles: // - CSS background-size // - element's width and height // * Extracts background URL var computedStyle = getComputedStyle(elem), image = new 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 = [], ratio; // Load the image with the extracted URL. // Should be in cache already. image.src = src; // Determine the 'ratio' ratio = image.width > image.height ? image.width / image.height : image.height / image.width; // Split background-size properties into array cssSize = cssSize.split(' '); // First property is width. It is always set to something. computedDim[0] = cssSize[0]; // If height not set, set it to auto computedDim[1] = cssSize.length > 1 ? cssSize[1] : 'auto'; if(cssSize[0] === 'cover') { // Width is greater than height if(elemDim[0] > elemDim[1]) { // Elem's ratio greater than or equal to img ratio if(elemDim[0] / elemDim[1] >= ratio) { computedDim[0] = elemDim[0]; computedDim[1] = 'auto'; } else { computedDim[0] = 'auto'; computedDim[1] = elemDim[1]; } } else { computedDim[0] = 'auto'; computedDim[1] = elemDim[1]; } } else if(cssSize[0] === 'contain') { // Width is less than height if(elemDim[0] < elemDim[1]) { computedDim[0] = elemDim[0]; computedDim[1] = 'auto'; } else { // elem's ratio is greater than or equal to img ratio if(elemDim[0] / elemDim[1] >= ratio) { computedDim[0] = 'auto'; computedDim[1] = elemDim[1]; } else { computedDim[1] = 'auto'; computedDim[0] = elemDim[0]; } } } else { // If not 'cover' or 'contain', loop through the values for(var i = cssSize.length; i--;) { // Check if values are in pixels or in percentage if (cssSize[i].indexOf('px') > -1) { // If in pixels, just remove the 'px' to get the value computedDim[i] = cssSize[i].replace('px', ''); } else if (cssSize[i].indexOf('%') > -1) { // If percentage, get percentage of elem's dimension // and assign it to the computed dimension computedDim[i] = elemDim[i] * (cssSize[i].replace('%', '') / 100); } } } // If both values are set to auto, return image's // original width and height if(computedDim[0] === 'auto' && computedDim[1] === 'auto') { computedDim[0] = image.width; computedDim[1] = image.height; } else { // Depending on whether width or height is auto, // calculate the value in pixels of auto. // ratio in here is just getting proportions. ratio = computedDim[0] === 'auto' ? image.height / computedDim[1] : image.width / computedDim[0]; computedDim[0] = computedDim[0] === 'auto' ? image.width / ratio : computedDim[0]; computedDim[1] = computedDim[1] === 'auto' ? image.height / ratio : computedDim[1]; } // Finally, return an object with the width and height of the // background image. return { width: computedDim[0], height: computedDim[1] }; } // Stuff for debugging function updateData() { var background = getBackgroundSize(document.body); document.getElementById('width').innerHTML = background.width + 'px'; document.getElementById('height').innerHTML = background.height + 'px'; document.getElementById('winWidth').innerHTML = getComputedStyle(document.body).width; document.getElementById('winHeight').innerHTML = getComputedStyle(document.body).height; } // Execute onload, so that the background image is already loaded. window.onload = window.onresize = updateData; 

 html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { background: url('http://sofzh.miximages.com/javascript/images-7.jpg'); background-size: 80% auto; } div { background: rgba(0, 0, 0, 0.5); color: #fff; } 

 
 Background width:  
 Background height:  
 Body width:  
 Body height:   

Answer 2

使用JSFiddle 在这里 ，我发现改变容器的高度或宽度会迫使图像缩放到最大的高度或宽度。 意味着背景的一个边缘的测量值将等于容器的一个维度。 使用这个和一些比例，我们可以计算图像的尺寸。

 // 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) 

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