实施例

Question

#img {
    width:300px;
    height:300px;
    overflow:hidden;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    color:#fff;
}
    $('#get').click(function () {
        var width = $('#img').css('background-size').width();
        var height = $('#img').css('background-size').height();

        alert('Width: ' + width + ' Height: ' + height);
    });

    //I DON'T want the size of the orginal image. I want the size after the background size has been contained. 

<div id="img" style="background:url(http://img.phombo.com/img1/photocombo/987/cache/wide-wallpaper-1440x900-013_display.jpg) #1BA5E0;">
</div>
    <p>
        <button id="get">Get Contained Size</button>

我希望获得原始背景图片大小，但是在使用jQuery包含背景（在完成此操作之后：background-size：contains;）之后。有可能吗？

http://jsfiddle.net/QyfG2/

Answer 1

我认为这个计划的缺陷是，在加载页面时，背景图像实际上不是DOM的一部分。当您查询.css('background-size')时，您将返回分配给该规则密钥的CSS规则值（即密钥：值）。

因此，如果我的div背景为#000，并且我要求jQuery返回$('div').css('background')，则会返回#000的值。

由于您使用容器缩放背景图像，要将其压缩到新维度，.css('background-size')的值将永远不会像“100px 500px”那样的计算值。它可能是“自动”。此外，background-size的属性没有width的属性，因此.css('background-size').width()不会在上面的jQuery中返回值。

我能想到的唯一解决方案是使用JS来查找图像的初始尺寸，然后在页面渲染后查找它的容器的最终尺寸，并使用math和if-else语句计算两者之间的比例。

实施例

IMG original dimensions: 1000px x 400px
container's dimensions after page renders: 600px x 200px

// Compare the ratio of height / height and width / width
widthRatio = .6
heightRatio = .5

// image should scale proportionally, so it must scale to the smallest ratio
// e.g. if it needs to be 50% as tall, it has to be 50% as wide, even though
// it could fit set at 60% its original width

// so multiply ratio (.5) by original dimensions of image (1000px x 400px)
newImgBgDimensions = 500px x 200px

Answer 2

window.onload = function() {

    var imageSrc = document
                    .getElementById('hello')
                     .style
                      .backgroundImage
                       .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
                        .split(',')[0];

    // I just broke it up on newlines for readability        

    var image = new Image();
    image.src = imageSrc;

    var width = image.width,
        height = image.height;

    alert('width =' + width + ', height = ' + height)  

}

Answer 3

  function getheightwidth(id) {
        var element = document.getElementById(id);
        if (element && element.tagName.toLowerCase() == 'img') {
            return {
                width: element.width,
                height: element.height
            };
        }

    }

    <img id="imageid" src="......jpg" alt="" onclick="getheightwidth(this.id)"/>

     var dimensions= getheightwidth();
    alert("Width is " + dimensions.width +"Height is "+ dimensions.height);

这应该可以解决你的问题:)

Answer 4

你找不到高度宽度的背景图像。没有办法让css能找到像背景图像的高度宽度这样的属性。你可以做的是用javascript或jquery加载图像，然后得到那些高度/宽度图像。

Answer 5

使用以下代码，这可能有助于您在包含

后获得背景尺寸

function get(img){

    var imageSrc = $(img).css('backgroundImage')
                   .replace(/url\((['"])?(.*?)\1\)/gi, '$2')
                    .split(',')[0];    
    var image = new Image();
    image.src = imageSrc;
    var bgwidth = image.width,
    bgheight = image.height,    
    bgContainWidth = $(img).width();

    var bgContainHeight = (bgheight*bgContainWidth)/bgwidth;

    var decimal = bgContainHeight.toString().split('.');

    if(decimal[0]>=5)
    {
       bgContainHeight = Math.ceil(bgContainHeight);
    }
    else
    {
       bgContainHeight = Math.floor(bgContainHeight);
    }

    alert('bg Contain width = ' + bgContainWidth
           + ',bg Contain Height = ' + bgContainHeight);

}

$('#get').click(function () {
   get('#img');
});

请参阅演示小提琴：http://jsfiddle.net/c4yHf/1/

Answer 6

Actualy您正在寻找容器（<div id="img">）的大小而不是图像。如果您将获得容器尺寸您将获得其中的图像大小（它的背景）。我将给你jQuery解决方案：

$(document).ready(function(){
    alert('width: ' + $('#img').width() +'; height: ' +  $('#img').height() );
})

您还可以检查容器尺寸是否大于原始图像尺寸。

在包含CSS后，使用jQuery获取background-image的大小

6 个答案:

实施例