javascript - 在parallax.js中缩放

作为我正在做的Web项目的一部分，我正在使用parallax.js库。我正在尝试做的是在整个视口中填充图像，并且当用户在鼠标周围移动时，图像也会随之移动。

我最初尝试使用img元素，并且大多数情况下都可以。我必须做一些技巧才能使它居中。但是，最大的问题是它无法正确扩展。如果在手机上打开该页面，或者在超宽显示器中将其最大化，则可以看到图像周围的背景。

<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之间切换，以某种方式使其缩放，但效果不佳。谷歌搜索后，我碰到了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

最佳答案

最后，使用以下类进行绝对定位可以达到目的：

.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%);
}

关于javascript - 在parallax.js中缩放，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44099820/