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

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）上进行了测试。- 如果缩小屏幕，一切都会变得非常糟糕，因此，您将需要通过媒体查询调整移动设备的所有措施。- 底部元素有一个 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

最好的方法是为图像提供一个固定位置的容器。

这是我的解决方案，使用这个想法，但无需调整大小即可工作

请注意，由于现在图像仅覆盖屏幕宽度的一半，因此它们也将覆盖高度的一半。如果图像处于纵向模式，则可以修复此问题。为了使用当前图像获得更好的结果，我添加了另一行图像，现在顺序颠倒了（仅对某些屏幕比例可见）

.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 属性可能会破坏此纵横比。