要素を使ってカバーの「状態」を得ることができます

Question

私はちょっと周りに私の背景イメージを動かすという考えで回っていました。非常に空想的で、比較的簡単です。 問題は私の背景イメージが現在カバーするように設定されていることです。 （バックグラウンド・サイズ：カバー;）：この場合

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

を私は左のCSSの設定を取得していますが、何を把握する方法がある

次のように私は、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; 

Answer 2

希望します。

背景サイズを100％よりも大きな割合に設定すると、背景サイズを大きくすることができます。

位置の値を0（左端/上端）から100％（右端/下端）まで移動できます。

@keyframes example { 
 
    0% { 
 
    background-position: 50% 50%; 
 
    } 
 
    20% { 
 
    background-position: 0% 20%; 
 
    } 
 
    40% { 
 
    background-position: 30% 100%; 
 
    } 
 
    60% { 
 
    background-position: 100% 10%; 
 
    } 
 
    100% { 
 
    background-position: 50% 50%; 
 
    } 
 
} 
 
.img { 
 
    width: 300px; 
 
    height: 200px; 
 
    animation: example 5s infinite; 
 
    background: url(https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg) no-repeat; 
 
    background-size: 120%; 
 
    background-position: 30% 20%; 
 
}

<div class="img"> 
 
    <div>