javascript - 你能用元素得到封面的 "state"吗

Question

所以我想把我的背景图片稍微移动一下。非常花哨，而且相对容易做。问题是我的背景图像当前设置为覆盖。 (背景大小:封面；)

我可以获得如下css设置:

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

在这种情况下，我只得到左侧的 css 设置，但有没有办法弄清楚封面做了什么。基本上，我很想知道它是否使图像更宽更宽 20% 或类似的东西，所以我知道我可以滑动图像的宽度。

我想理论上我可以用代码做出有根据的猜测。或者可能只是一起忽略它，仅根据宽度移动图像，希望渲染处理其余部分。

Answer 1

如果我没理解错的话，只要知道原始图像大小，就可以根据已知的“覆盖”行为和带有背景的元素判断图像大小发生了多少变化:

//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;