如何使用缩放变换使背景覆盖可见时使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>