9

is there an easy way to get the final height and width of a background image with Javascript or jQuery even if a background-size property was applied?

I mean, I know I can get the background image url and load it to an Image object and then get the width and height. But it is the size of the source image. If someone scaled it with CSS then the size changed

How can I find its final size?

@edit

it is different from the question marked as similar because it doesnt say how to get the size in pixels if someone changed the background-size

4

2 回答 2

16

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

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

如果background-size设置了外部 CSS 文件、内联 CSS、内联标题 CSS或根本没有设置（意味着宽度和高度为auto），则它可以工作。

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

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

这是 StackOverflow 的代码片段（带有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://hdwallpapersfit.com/wp-content/uploads/2015/03/images-7.jpg');
    background-size: 80% auto;
}
div {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}
<div id="data">
    Background width: <span id="width"></span>
    <br>
    Background height: <span id="height"></span>
    <hr>
    Body width: <span id="winWidth"></span>
    <br>
    Body height: <span id="winHeight"></span>
</div>

于 2015-05-02T09:22:54.787 回答
1

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

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

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

于 2015-05-02T07:24:00.660 回答