缩放 parallax.js

Question

作为我正在制作的 Web 项目的一部分，我正在使用 parallax.js 库。我想要做的是让图像填满整个视口，当用户在鼠标周围移动时，图像也会相应地移动。

我最初尝试使用 img 元素，它基本上工作正常。为了让它居中，我不得不做一些技巧。然而，最大的问题是它不能正确扩展。如果我在我的 phone 上打开该页面，或者如果我在我的超宽显示器中将其最大化，您可以看到图像周围的背景。

<style>
.container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.scene {
    width: 100%;
    height: 100%;
}

.layer {
    width: 100%;
    height: 100%;
}

img {
    margin-left: 50%;
    transform: translateX(-50%);
    margin-top: -3%;
    width: 130%;
    height: auto;
}
</style>   

<body>
<div class="container">
            <div class="panel">
                <div class="scene">
                    <div class="layer" data-depth="1.00"><img src="https://static.giantbomb.com/uploads/original/13/137381/2859027-borderlands-lg.jpg"></div>
                </div>
            </div>
        </div>
</body>

我尝试使用媒体查询在 css 中的 width:auto 和 height:auto 之间切换，以某种方式使其扩展，但没有成功。经过一些 google 搜索，我找到了 background-size: cover，它基本上完全符合我的要求。但是，当我将 img 切换为带有背景图像的 div 时，出现了另一个问题。无论放大多少（阅读：比视口大多少），带有图像的 div 都会在视口边界处被截断。这意味着只要用户稍微移动鼠标，背景就会可见。

<style>
.panel {
    width: 100vw;
    height: 100vh;
    overflow:hidden;
}

.scene, .layer{
    width: 100%;
    height: 100%;
    overflow:hidden;
}

.parallaximg {
    background-image: url("https://static.giantbomb.com/uploads/original/13/137381/2859027-borderlands-lg.jpg");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    overflow:hidden;
    width:120%;
    height:120%;
        margin-left: 50%;
    transform: translateX(-50%);
}
</style>

<body>
    <div class="wrapper">
        <div class="panel">
            <div class="scene">
                <div class="layer" data-depth="1.00"><div class="parallaximg"></div></div>
            </div>
        </div>
    </div>
</body>

两个例子的JS脚本是一样的（需要JQuery和parallax.js）：

var scene = $(".scene")[0];
var parallax = new Parallax(scene, {
    scalarX: 4,
    scalarY: 4
});

有什么办法让它工作吗？如果没有，我将如何让 img 版本在所有纵横比上正确缩放？

为了清楚起见，我做了两个例子：

JsFiddle 与 img
JsFiddle 与 background-image

Answer 1

最终，使用以下 class 的绝对定位成功了：

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

缩放 parallax.js

Scaling in parallax.js

html

javascript

css

parallax.js