在parallax.js中缩放

Question

As part of a web project I'm making, I'm using the parallax.js library. 作为我正在做的Web项目的一部分，我正在使用parallax.js库。 What I am trying to do is have an image fill up the entire viewport, and when the user moves around their mouse, the image moves too in response. 我正在尝试做的是在整个视口中填充图像，并且当用户在鼠标周围移动时，图像也会随之移动。

I initially tried using an img element, and it mostly worked okay. 我最初尝试使用img元素，但大多数情况下都可以。 I had to do some tricks in order to get it centered. 我必须做一些技巧才能使它居中。 The big problem however was that it doesn't scale properly. 但是，最大的问题是它无法正确扩展。 If I opened the page on my phone, or if I maximized it in my ultrawide monitor, you could see the background around the image. 如果在手机上打开该页面，或者在超宽显示器中将其最大化，则可以看到图像周围的背景。

<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>

I tried using media queries to toggle between width:auto and height:auto in css to somehow get it to scale, but it wasn't working out. 我尝试使用媒体查询在CSS中的width:auto和height:auto之间切换，以某种方式使其缩放，但没有成功。 After some google searching, I came across background-size: cover , which basically does exactly what I want. 经过一些谷歌搜索，我遇到了background-size: cover ，基本上可以满足我的要求。 However, when I switched out the img for a div with a background image, another problem arose. 但是，当我将带有背景图像的div的img切换出去时，出现了另一个问题。 No matter how zoomed in (read: how much larger than the viewport), the div with the image is, it gets cut off at the viewport borders. 不管放大多少（读取：比视口大多少），带有图像的div都会在视口边界处被截断。 This means that whenever the user moves their mouse in the slightest, the background is visible. 这意味着每当用户最轻微地移动鼠标时，背景都是可见的。

<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>

The JS script for both examples is the same (requires JQuery and parallax.js ): 这两个示例的JS脚本是相同的（需要JQuery和parallax.js ）：

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

Is there some way to get it to work? 有什么办法可以使其正常工作吗？ If not, how would I go about getting the img version to scale properly on all aspect ratios? 如果没有，我将如何使img版本在所有纵横比上正确缩放？

Here are two examples I made for clarity: 为了清楚起见，这是两个示例：

JsFiddle with img JsFiddle与img
JsFiddle with background-image 具有background-image JsFiddle

Answer 1

In the end, absolute positioning using the following class did the trick: 最后，使用以下类进行绝对定位可以达到目的：

.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中缩放

问题描述

1 个解决方案

解决方案1
0 已采纳 2017-06-21 08:55:31

在parallax.js中缩放

问题描述

1 个解决方案

解决方案1 0 已采纳 2017-06-21 08:55:31

解决方案1
0 已采纳 2017-06-21 08:55:31