如何使用縮放變換使背景覆蓋可見時使div更小？

Question

1. 我有一個絕對的div（需要是絕對）。
2. 絕對div有與背景尺寸設置爲覆蓋（大小蓋必要）
3. 我使用的CSS變換到時懸停在div擴展到小於1的值，背景圖像例如，刻度（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

好一番思考後一看，我到了一個解決方案。 基本上，背景尺寸：覆蓋 邏輯等於

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>