並排視差圖像，同時保持縱橫比

Question

我試圖完成並排放置兩個視差background-image ，同時保持它們的縱橫比。 我遇到的問題是每個圖像似乎都被垂直切成兩半。 我嘗試在background-attachment和background-size使用不同的值但無濟於事。 刪除background-attachment: fixed; 從下面的代碼修復了縱橫比問題，但失去了視差效果。 有誰知道如何同時完成這兩個任務？

 .image-left { width: 50%; float: left; height: 500px; background-attachment: fixed; background-position: center; background-repeat: none; background-size: cover; background-image: url('https://www.gstatic.com/webp/gallery/1.webp'); } .image-right { width: 50%; float: left; height: 500px; background-attachment: fixed; background-position: center; background-repeat: none; background-size: cover; background-image: url('https://www.gstatic.com/webp/gallery/2.webp'); } .content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange; }

 <div class="content"> <h1>Lorem</h1> </div> <div class="image-left"></div> <div class="image-right"></div> <div class="content"> <h1>Ipsum</h1> </div>

在這里為上面的代碼小提琴。

我也嘗試使用這篇文章中的 jQuery 函數，但無法讓它與並排圖像一起使用。 （見小提琴）

 $(window).scroll(function() { var scrolledY = $(window).scrollTop(); $('#container').css('background-position', 'left ' + ((scrolledY)) + 'px'); });

Answer 1

正如其他人指出的那樣，我認為您無法通過背景圖片實現您的目標......

所以我嘗試了另一種方法，主要包括： - 有兩個部分：一個用於圖像，另一個用於內容。 - 至於圖像，將它們包裝成一個元素並使用位置固定。 它們位於元素的最頂部，如果你想改變它，你可以使用top屬性。 - 至於內容，兩個區域也被包裹在一個位置絕對的容器中。 - 底部的內容將負責圖像中的“呼吸”空間，因此，您需要使用margin-top來達到預期的效果。

一些注意事項： - 給定的示例目前僅適用於台式機，在全屏筆記本電腦上測試（寬度約為 1680 像素）。 - 如果縮小屏幕，一切都會變得非常糟糕，因此，您將需要通過媒體查詢調整所有針對移動設備的度量。 - 底部元素有一個 min-height 屬性只是為了演示目的。

綜上所述，我不太確定這是否是我推薦的東西。

你真的能把兩張圖片合二為一嗎？ 這樣，您可以只使用后台方法，而無需進行此開發。

我不喜歡我的方法，因為它包含很多關於位置的固定值，最終，這會引入可維護性問題。

我希望它有幫助！

 .image-wrapper { position: fixed; top: 0; width: 100%; display: flex; flex-flow: row nowrap; } .image { width: 100%; } .content-wrapper { position: absolute; top: 0; left: 0; right: 0; } .content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange; } .content-bottom { margin-top: 300px; min-height: 1000px; }

 <div class="image-wrapper"> <img class="image" src="https://www.gstatic.com/webp/gallery/1.webp"> <img class="image" src="https://www.gstatic.com/webp/gallery/2.webp"> </div> <div class="content-wrapper"> <div class="content"> <h1>Lorem</h1> </div> <div class="content content-bottom"> <h2>Ipsum</h2> </div> </div>

Answer 2

正如 avcajaraville 指出的那樣，最好的方法是為位置固定的圖像設置一個容器。

這是我的解決方案，使用這個想法，但無需調整大小

請注意，由於現在圖像僅覆蓋屏幕寬度的一半，因此它們也將覆蓋高度的一半。 這可以修復在縱向模式下的圖像。 為了使當前圖像獲得更好的結果，我添加了另一行圖像，現在順序顛倒了（僅在某些屏幕比例下可見）

 .images { position: fixed; width: 100%; z-index: -1; } .images div { display: inline-block; width: 49%; margin: 0; height: 500px; background-position: center; background-size: cover; } .image-left { background-image: url('https://www.gstatic.com/webp/gallery/1.webp'); } .image-right { background-image: url('https://www.gstatic.com/webp/gallery/2.webp'); } .content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange; } .filler { height: 500px; }

 <div class="images"> <div class="image-left"></div> <div class="image-right"></div> <div class="image-right"></div> <div class="image-left"></div> </div> <div class="content"> <h1>Lorem</h1> </div> <div class="filler"></div> <div class="content"> <h1>Ipsum</h1> </div>

Answer 3

 .flexrow { display: flex; flex-flow: row wrap; } .flexrow > .image { flex: 0 1 50%; min-height: 350px; background-size: 100%; } .img1 { background-size: cover; background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ; } .img2 { background-size: cover; background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ; } .content { text-align: center; padding: 100px 30px; font-size: 1.25rem; color: #fff; background-color: orange; }

 <div class="content"> <h1>Lorem</h1> </div> <div class="flexrow"> <div class="image img1"></div> <div class="image img2"></div> </div> <div class="content"> <h1>Ipsum</h1> </div>

認為這就是您要尋找的內容，請記住，當沒有可用空間（調整大小，低分辨率）時，圖像上的 min-height 屬性可能會破壞此縱橫比。