javascript - 平滑的背景过渡和缩放动画之一不适合容器

根据我在SO上找到的一些示例，我尝试融合了两种效果：在缓慢缩放动画的过程中平滑背景变化。事情是一旦缩放动画从1.0 to 1.{whatever}的比例开始，它就会超出div的边界，而我想保持固定的div尺寸。请注意，background-size:cover;标记在代码中，并且仅在初始比例下有效。

您可以在这里找到我苦苦挣扎的示例：http://mattosuch.eu/test.html

谢谢

最佳答案

您可以为每个缩放的div元素创建一个外部div，像这样将CSS提供给新创建的div。

div.outer{
height: 200px; /*Equal to real height of your inner div with `transform:scale(1,1)`*/
width: 200px; /*Equal to real width of your inner div with `transform:scale(1,1)`*/
overflow: hidden;
}