divを小さくするために縮尺変換を使用しているときに背景カバーをオーバーフローさせる方法

Question

1. 私は絶対divを持っています（絶対である必要があります）。
2. 絶対DIVは、（必要なサイズカバー）をカバーするように設定された背景サイズを有する背景画像を有する
3. 私は、1よりも小さい値にホバー時DIVをスケーリングする変換CSSを使用してい例：scale（0.7）

問題：縮小されたときにカバーの背景画像がdivを超えてオーバーフローするようにしたい。

私はそれがなぜ必要なのですか？イメージは透明で、背景サイズのカバーの周囲に浮かびます。モバイルでブラウズすると、divの端にあるグラフィックスが切り抜かれ、divがスケールされます。

CSSソリューションのみをご利用ください。

編集：CSS + jsソリューションが行います。

例：外側のdivは、モバイルブラウザウィンドウを表すはずです。

.chivoyage{ 
 
    position:absolute; 
 
    top:0px; 
 
    right:0px; 
 
    bottom:0px; 
 
    left:0px; 
 
    background-image:url('http://clipart.info/images/ccovers/1495916688repin-image-stars-png-transparent-stars-on-pinterest.png'); 
 
    background-size:cover; 
 
    background-position:center center; 
 
    transition: all 1s ease-out 0s; 
 
    cursor:pointer; 
 
    } 
 

 
    .chivoyage:hover{ 
 
    transform: scale(0.8); 
 
    } 
 

 
.window-mobile{ 
 
width:150px; height:300px; position:relative; border:1px solid black; 
 
}

<div class="window-mobile"><div class="chivoyage"><div></div>

<div> 

Answer 1

[OK]を見て、私は解決策に到着しました。 基本的には、背景サイズは： を覆うように論理的に等しい

1. 背景サイズ：100％の自動幅場合 ：自動：画像の高さの比は、容器

2. 背景サイズのより低いです100％ 幅場合：画像の高さの比は、だから、私はnaturalheightとnaturalwidthを使用して比を計算終わっ

容器よりも高いですif文では、適用するバックグラウンド・サイズを取得するため、jsで値を処理して背景イメージを変換することができます。次に含まれ、単に比率を計算し、反対を行う（1.自動100％になると2は100％自動になります）

Answer 2

ホバーサイズを小さくするには、背景のサイズを試すだけscaleを使用しないでください。いくつかの考えた後、コード

.chivoyage{ 
 
position: absolute; 
 
    top: 0px; 
 
    right: 0px; 
 
    bottom: 0px; 
 
    left: 0px; 
 
    background: url(http://clipart.info/images/ccovers/1495916688repin-image-stars-png-transparent-stars-on-pinterest.png)no-repeat center; 
 
    background-size: 270%; 
 
    transition: all 1s ease-out 0s; 
 
    cursor: pointer; 
 
    } 
 

 
    .chivoyage:hover{ 
 
     background-size: 200%; 
 
    } 
 

 
.window-mobile{ 
 
width:150px; height:300px; position:relative; border:1px solid black; 
 
}

<div class="window-mobile"><div class="chivoyage"><div></div>