3 
#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 获取原始背景图像大小，但是在包含背景之后（完成此操作后：背景大小：包含；）。有可能这样做吗？

http://jsfiddle.net/QyfG2/

4

6 回答 6

2

我认为这个计划的缺陷是背景图像在页面加载时并不是真正的 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 找到图像的初始尺寸，然后在页面呈现后它的容器的最终尺寸，并使用数学和 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
于 2013-12-24T05:58:01.147 回答
1

使用下面的代码这可能会帮助您在包含后获得背景大小

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/

于 2013-12-24T06:59:21.160 回答
0

您找不到背景图像的高度宽度。css 无法找到背景图像的高度宽度等属性。您可以做的是使用 javascript 或 jquery 加载图像，然后获取这些图像的高度/宽度。

于 2013-02-22T06:59:19.450 回答
0 
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)  

}
于 2013-02-22T06:21:07.013 回答
0 
  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);

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

于 2013-02-22T06:25:21.247 回答
-1

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

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

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

于 2013-02-22T07:57:54.907 回答