2

I have the following simple code to get me the background-image dimensions, but it grabs the size of the original image, not the scaled one I have in my div. I want to get pixel dimensions after scaling, is there any way to do that?

var actualImage = new Image();
actualImage.src = $("#chBox").css('background-image').replace(/"/g, "").replace(/url\(|\)$/ig, "");
actualImage.onload = function () {
    width = this.width;
    height = this.height;
}

EDIT:

The CSS to scale the background-image:

#chBox {
height:100%;
width:100%;
background-repeat:no-repeat;

background-image: url(../content/frog/1.jpg);
background-position: center;
    -webkit-background-size: contain; /*for webKit*/
    -moz-background-size: contain; /*Mozilla*/
    -o-background-size: contain; /*opera*/
    background-size: contain; /*generic*/

}
4

3 回答 3

1

您需要获取所需图像的$('#someImage').css('width')和$('#someImage').css('height')，而不是获取实际图像的尺寸。

编辑：

#someImage img {
    width: 100px;
    height: auto;
}
<td id="image">
    <img id="someImage" src="image.jpg">
    <script type="text/javascript">
        alert($('#someImage').css('width'));
    </script>
</td>

上面的代码会提醒“100px”。当然，如果您使用一些 jQuery 来更改图像的宽度，例如$('#someImage').css('width','300px')，代码将更新并警告“300px”

于 2012-06-26T23:42:35.433 回答
0

代码正在做你告诉它做的事情。我不相信有办法抓住“缩放”的大小。

于 2012-06-26T23:29:55.833 回答
0

好的，感谢大家的回复，但我想到了一些解决方法。我希望在以后的 jQuery 版本中看到这个功能（抓取缩放的宽度、高度），但通过一些数学计算，它还不错。本质上，

            // create a fake image and load the original from background-img src
        var actualImage = new Image();
        actualImage.src = $("#chBox").css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");
        actualImage.onload = function() {
            // get original values
            var origWidth = this.width;
            var origHeight = this.height;
            var width = 0;
            var height = 0;
            // need to bump it 140px as it seems the div's left comes from the super-container
            var bump = 140;
            // if the image is fat rather than tall,
            if(origWidth > origHeight){
                // set width for description to width of bg-img container
                var width = $("#chBox").width();
                // set left
                $(".description").css("left", bump);
                // calculate height and set bottom
                height = (width * origHeight) / origWidth;
                var blankSpace = $("#chBox").height() - height;
                $(".description").css("bottom", (blankSpace/2));


            } else {
                // if image is tall,
                var height = $("#chBox").height();
                // calculate width
                width = (height * origWidth) / origHeight;
                // set left
                var setLeft = $("#chBox").width();
                $(".description").css("left", (setLeft/2) - 58);    //wtf, 58?
                // set bottom to 0
                $(".description").css("bottom", 0)
            }

            $(".description").width(width);
        }

那里有很多特定于站点的东西，但基本上我运行了一些代数来找到图像的比例。如果它是胖图像而不是高图像，则容器的宽度是缩放后的宽度。高度等于缩放宽度 * 原始图像高度除以原始图像宽度。出于某种原因（如果有人可以提供帮助，我将不胜感激） margin: 0 auto; 当您更改 div 宽度时，我的 CSS 的属性不起作用，因此我必须手动将其居中。

于 2012-06-27T19:56:19.887 回答