在包含CSS之后，使用jQuery获取background-image的大小 [英] Get the size of background-image with jQuery after containing with CSS

问题描述

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

我想获得原始背景图片的大小，但是在包含背景后已完成：background-size：contains;）与jQuery。是可能做到的吗？

I want to get the original background image size but after the background has been contained (after this action has been done: background-size:contain;) with jQuery. Is it possible to do that?

http://jsfiddle.net/QyfG2/

推荐答案

我认为这个计划的缺点是当页面不是DOM的背景图片加载。当您查询 .css（'background-size'）时，您将返回分配给的CSS规则 value

I think the flaw with this plan is that the background-image isn't really part of the DOM when the page is loaded. When you query .css('background-size') you'll return the CSS rule value (i.e. key:value) that is assigned to that rule's key.

所以如果我有一个 div ，背景为＃000 并且我要求jQuery返回 $（'div'）。css（'background'） c>＃000 。

So if i have a div with a background of #000 and i ask jQuery to return $('div').css('background') it'll return the value of #000.

由于您使用容器来缩放背景图片， .css（'background-size'）永远不会是像100px 500px这样的计算值。它可能是自动。此外， background-size 的属性没有属性 width 所以。 css（'background-size'）。width（）不会返回上面jQuery中的值。

Since you're using the container to scale a background image, to squeeze it to new dimensions, your value for .css('background-size') will never be a computed value like "100px 500px". It will probably be "auto". Also, the property of background-size doesn't have an attribute of width so .css('background-size').width() won't return a value in the jQuery you have above.

我可以想到的是使用JS来找到图像的初始尺寸，然后是它的容器在页面渲染后的最终尺寸，并使用math和if-else语句计算两者之间的比率。

The only solution I can think of is to use JS to find the initial dimensions of the image, then the final dimensions of it's container after the page renders, and compute the ratio between the two using math and if-else statements.

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

这篇关于在包含CSS之后，使用jQuery获取background-image的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！