vrghost vrghost - 2 months ago 7
CSS Question

Can you get the "state" of cover using element

So was playing around with the idea that I would move my background image around a bit. Very fancy, and relatively easy to do.
Problem is that my background image is currently set to cover. (background-size:cover;)

I can get the css settings as follows:

var pageElement = document.getElementById("page");
var curLeft = pageElement.style.left;
var newLeft = posIndex[current] * 10 ;


In this case I am only getting the css setting for left, but is there a way to figure out what cover have done.
Basically, I would love to get an idea if it made the image taler and wider by 20% or anything like that, so I know how much width I can slide the image.

I guess in theory I could make an educated guess with code. Or maybe just ignore it all together, shift the image based on width alone, hope the rendering takes care of the rest.

Answer

If I understand you correctly, you can tell how much the image size has changed based on the known behavior of "cover" and the element with the background as long as you know the original image size:

//Original size
var size={w:120, h:120};

//Check the difference between the element dimensions and the original size
var diff={w:el.offsetWidth/size.w, h:el.offsetHeight/size.h}

//Whichever one is higher is your new image ratio
if(diff.w > diff.h) var ratio = diff.w*100;
var ratio = diff.h*100;
Comments