In CSS I set a button to be 100px x 100px and have the background-size: contain;

In javascript I apply an image to the element that I do not have the Height/width of (nor aspect ratio) .

In another function in javascript I need to be able to get the size of the image/background of this button after it has passed through the contain function.

Is there any way to do this (I have access to Jquery as well)

Small Sample:

<style>
#imageButton{ 
    width: 100px;
    height: 100px;
    background: url("imageURL"); 
    background-size: contain !important; 
}
</style>
<script>
    var imageElem = $('#imageButton')[0];
    console.log($(imageElem).width());
    //100px but need width of image after scaling

</script>

In CSS I set a button to be 100px x 100px and have the background-size: contain;

In javascript I apply an image to the element that I do not have the Height/width of (nor aspect ratio) .

In another function in javascript I need to be able to get the size of the image/background of this button after it has passed through the contain function.

Is there any way to do this (I have access to Jquery as well)

Small Sample:

<style>
#imageButton{ 
    width: 100px;
    height: 100px;
    background: url("imageURL"); 
    background-size: contain !important; 
}
</style>
<script>
    var imageElem = $('#imageButton')[0];
    console.log($(imageElem).width());
    //100px but need width of image after scaling

</script>

• javascript
• jquery
• html
• css

• You're looking for window.getComputedStyle()? – Teemu Commented Nov 15, 2013 at 22:28
• I've tried to get it with $(imageElem).width() and $(imageElem).height(), where imageElem = $('imageButton')[0]; Note: there are other reasons why imageElem is the actual dom element instead of the jquery element. – Brandon Commented Nov 15, 2013 at 22:31
• @Teemu, that will get the display size of the button which is 100px by 100px, I need the size of the image set to the button #imageButton{ background: url("imageURL"); background-size: contain !important; } – Brandon Commented Nov 15, 2013 at 22:34
• 1 A background image is a kinda pseudo element which you actually can't refer. The only interface is the given CSS. You could try to hunt the background image from document.images collection. If it's there, you could get some properties too (though I haven't tested this). Btw. you should add the code and explanation written in your last ment to your post too. It would significantly improve the question. – Teemu Commented Nov 15, 2013 at 22:52
• Just checked the document.images library on the page, since the images are loaded post load they don't seem to be in there (they are also displaying off of another domain) – Brandon Commented Nov 15, 2013 at 22:56

1 Answer 1

CSS property background-size: contain; scales the image to the largest so that both the height and width will fit inside, retaining the same aspect ratio of course.

Just like @Teemu said, A background image is a kinda pseudo element which you actually can't refer. But I can show you a workaround on how to get the real image size and pute the scaled background-image size.

It works like ratio and proportion where:

real_image_width is to real_image_height as resized_image_width is to resized_image_height

First we need to get the real size of the image:

var img = new Image;
img.src = $('#imageButton').css('background-image').replace(/url\(|\)$/ig, "");
var imgW = img.width;
var imgH = img.height;

Then, pare which dimension is the largest and calculate the proportion:

var newW, newH;

if(imgW > imgH){
    newW = $('#imageButton').width(); //100;
    newH = imgH / imgW * newW;
}else{
    newH = $('#imageButton').height(); //100
    newW = imgW / imgH * newH;      
}

console.log(newW+':'+newH);

If the image is not yet loaded or cached it will return a size of 0, a good way to fix this is to get the size when the image is has been loaded using .load() function.

Browsers also differ in sub-pixel rendering, I think you need to round off to nearest .5 decimal to get the exact safest value (43.7832 => 43.5). Using: (Math.round(value * 2) / 2).toFixed(1)

That's it! Here is the sample fiddle.