并排视差图像，同时保持纵横比

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来获得所需的结果。

一些注意事项：-给定的例子目前只在桌面上工作，在全屏笔记本电脑(宽度约1680px(上测试。-如果你缩小屏幕，一切都会变得非常糟糕，因此，你需要通过媒体查询调整移动设备的所有措施。-底部元素有一个最小高度属性，仅用于演示。

总之，我不太确定这是否是我推荐的东西。

你真的能把两张照片合并成一张吗？这样，您就可以使用后台方法，而不需要这种开发。

我不喜欢我的方法的地方是，它包含了很多关于位置的固定值，最终，这会引入可维护性问题。

我希望它能有所帮助！

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

这就是你想要的，记住，当没有可用空间时(调整大小时，低分辨率(，图像上的最小高度属性可能会打破这个纵横比。