作为我正在做的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:autoheight: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脚本是相同的(需要JQueryparallax.js):

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


有什么办法可以使其正常工作吗?如果没有,我将如何使img版本在所有纵横比上正确缩放?

为了清楚起见,这是两个示例:


JsFiddleimg
JsFiddlebackground-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/

10-11 13:16