Retrieve computed value from background-size:cover/contain

Question

Covering the browser's viewport with a 400x200 background image using background-size:cover:

html, body {height:100%;}
body {background:url("http://lorempixel.com/g/400/200/") center no-repeat; background-size:cover;}

I'd like to retrieve - through javascript - the computed background-size value that is applied to the picture, for example 1536px 768px

Live demo : https://codepen.io/abernier/pen/rHkEv

NB: I just want to read it, at no time compute it (since the browser already has, in a way)

Answer 1

I know I'm very late to the party but i have used the code below to solve this.

    var backgroundImage = new Image();
    backgroundImage.src = $('my_div_id').css('background-image').replace(/"/g,"").replace(/url\(|\)$/ig, "");

    backgroundImage.onload = function() {
        var width = this.width;
        var height = this.height;

        var object = $('#my_div_id');

        /* Step 1 - Get the ratio of the div + the image */
        var imageRatio = width/height;
        var coverRatio = object.outerWidth()/object.outerHeight();

        /* Step 2 - Work out which ratio is greater */
        if (imageRatio >= coverRatio) {
            /* The Height is our constant */
            var coverHeight = object.outerHeight();
            var scale = (coverHeight / height);
            var coverWidth = width * scale;
        } else {
            /* The Width is our constant */
            var coverWidth = object.outerWidth();
            var scale = (coverWidth / width);
            var coverHeight = height * scale;
        }
        var cover = coverWidth + 'px ' + coverHeight + 'px';
        alert('scale: ' + scale + ', width: ' + coverWidth + ', height: ' + coverHeight + ', cover property: ' + cover);
    };

A detailed walkthrough can be found here http://www.gene.co.uk/get-computed-dimensions-background-image-background-size-cover/

Answer 2

You can use Image object to get dimensions of your background image file, then compare it against size of the element

var element = ...

var img = new Image()
img.onload = compare;
img.src = 'path/to/your/background-image'

function compare() {
  var fx = element.offsetWidth/img.width;
  var fy = element.offsetHeight/img.height;
  console.log(fx, fy);
}

Then depending on value of background-size property you can get exact scale factors

function compare() {
  var fx = element.offsetWidth/img.width;
  var fy = element.offsetHeight/img.height;

  var bs = window.getComputedStyle(element, null).backgroundSize;
  switch (bs) {
    case 'cover': console.log(Math.min(fx, fy)); break;
    case 'contain': console.log(Math.max(fx, fy)); break;
    case '100% 100%': console.log(fx, fy);
    default: console.log("Umm...");
  }
}

Default case is more complicated. Since each part of background size can be presented in number of units, code correctly handling those units will be a bit spaggettish and ugly.

jQuery based fiddle

Answer 3

The background-size property specifies the size of the background image, not its "zoom factor". The only thing that you can get from this property is, well, its size. If such factor existed it would be in another property (-ies). You are digging in the wrong place.

Answering this question I had to ask myself another one. Does this number exist?

Let's imagine first that it does and the value is say 2.135 (twice as big as the original). What would happen to that number if I change the cover to 100% 100%. In this case the say "horizontal zoom factor" remained the same as cover's while the "vertical" zoom factor changed differently. What do you expect this number to be? How should it change?

The fact that one factor may change and the other may not leads me to assuming that they may (and should) be separate values (who knows, maybe "-vendor-background-size-x-zoom-factor" and "-vendor-background-size-y-zoom-factor" both of which may have positive and negative values and both of which are not included into any css-specs and both of which will remain under the hood of the browser, supposing they are in the form of css-properties, and not simply variables or who knows what).

In reality it may be a bit more complicated of course ))

Answer 4

It's not yet an answer, but tests I'm having...

I had a little test with a similar property background-position which also accepts keywords like center, left...(which implies %), as background-size does for cover/contain

Let's sandboxing a div with

var div = document.createElement('div');
div.style.cssText = "background-position:center 3%;";
document.body.appendChild(div);

now let's retrieve that center value with:

window.getComputedStyle(div, null)
      .getPropertyCSSValue('background-position-x')
      .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);

and guess what ?

50

Unfortunately,

var div = document.createElement('div');
div.style.cssText = "background-size:cover;";
document.body.appendChild(div);
window.getComputedStyle(div, null)
      .getPropertyCSSValue('background-size')
      .getFloatValue(CSSPrimitiveValue.CSS_PERCENTAGE);

throws an Error:

InvalidAccessError: A parameter or an operation was not supported by the underlying object.

Answer 5

The short answer is browsers do not provide a way to get the computed value of the scale factor of background image, but you can compute it yourself according to the rules described in the spec.

Answer 6

You can check the size of the div and the original image, find out if the width or the height of the div is shorter proportionally that means the image is stretched to 100% of the smaller side. For example: If the container div is 600px X 500px and the size of the image is 600px X 400px the image will resize to cover the entire div so it will be resized to auto X 500px, meaning the zoom of the image will be 500/400 = 1.25

Answer 7

There is no way to do this as it would require the image to be loaded in order to give you an accurate value. Even if this value was exposed, you would have to wait for the window.load event before you could retrieve it... at which point it's faster to just calculate the value on your own.

UPDATE: From the CSS spec, background size behaves differently under different conditions - whether the image has intrinsic dimensions/ratio (jpeg/svg) or not (css gradient), whether both values are set to "auto" (in which case it's treated as "contain"), whether one of the "background-repeat" values is set to "round", whether there are multiple backgrounds... you get the point.

Also, background-size requires layout (changes with the layout) but is not in the list of properties which are calculated post-layout to an actual "used" value. This is important because getComputedStyle returns the actual "used" value, but "background-size" does not go through the process of computed value -> used value.

Couple this with the fact that you can't even get a value until the image is loaded... I still submit that computing it on your own sounds like your best bet.

Answer 8

try:

background-size: contain

This will zoom in/out and fit the background size depending on device pixel ratio. No javascript or any computing required here as browser will perform rest of the tasks itself.