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

Question

我有一个绝对div（需要绝对）。
绝对 div 有一个背景图像，背景大小设置为覆盖（大小覆盖必要）
我正在使用 css 转换将悬停时的 div 缩放到小于 1 的值，例如，scale(0.7)

问题：我希望封面背景图像在缩小时溢出 div。

为什么我需要它：图像是透明的，不同的图形漂浮在周围并且具有背景大小的覆盖，所以当在移动设备中浏览时，转换会裁剪 div 边缘的图形并缩放div.

CSS只求解答。

编辑：CSS + js 解决方案即可。

示例：外部 div 应该代表移动浏览器 window。

.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

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

背景大小：100% 自动如果image的width:height比例低于container
背景大小：自动 100% 如果image的width:height比例高于container

所以我最终使用 naturalheight 和 naturalwidth 计算了比率，并使用 if 语句，我得到了要应用的背景大小，从而保持作为封面的行为，同时能够通过 js 使用值来转换背景-图像。

附带说明一下，如果您需要使用 background-size:contain，只需计算比率并执行相反操作（1. 自动 100%，2. 100% 自动）

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

How to overflow background cover to be visibile when using scale transform to make the div smaller?

css

overflow

css-transforms

background-size