Question

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

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

如何找到最终尺寸？

@edit

它与标记为类似的问题不同，因为它没有说如果有人更改了background-size

，如何获得像素大小

Answer 1

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

尺寸（宽度或高度）设置为auto，显式或因为未指定特定值（宽度和高度默认为auto）
尺寸设置为百分比%
尺寸设置为像素px
尺寸设置为以前任意一种的组合。（ ie 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个单位）

＆＃13;

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;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

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

@Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)

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

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

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

获取背景图像的最终大小

2 个答案: