如何在使用缩放变换使 div 变小时溢出背景覆盖以使其可见

Question

1. 我有一个绝对的div（需要绝对的）。
2. 绝对div 有一个背景图像，背景大小设置为覆盖（需要大小覆盖）
3. 我正在使用 css 转换在悬停时将div 缩放到小于 1 的值，例如 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

不要使用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>

Answer 2

好的，经过一番思考，我得出了一个解决方案。基本上，背景大小：封面逻辑上等于

1. 背景尺寸：100% 自动如果图像的宽高比低于容器的宽高比

2. 背景尺寸：自动 100%如果图像的宽高比高于容器的宽高比

因此，我最终使用自然高度和自然宽度计算比率，并使用 if 语句，我得到要应用的背景大小，从而保持行为作为掩护，同时能够通过 js 处理值来转换背景图像。

附带说明一下，如果您需要使用背景大小：包含，只需计算比率并执行相反的操作（1.将是自动100%，2.将是100%自动）