在parallax.js中縮放

Question

作為我正在做的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 ，基本上可以滿足我的要求。 但是，當我將帶有背景圖像的div的img切換出去時，出現了另一個問題。 不管放大多少（讀取：比視口大多少），帶有圖像的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
具有background-image JsFiddle

Answer 1

最后，使用以下類進行絕對定位可以達到目的：

.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