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

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 {&nbsp; position: fixed;&nbsp; top: 0;&nbsp; width: 100%;&nbsp; display: flex;&nbsp; flex-flow: row nowrap;}.image {&nbsp; width: 100%;}.content-wrapper {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; left: 0;&nbsp; right: 0;}.content {&nbsp; text-align: center;&nbsp; padding: 100px 30px;&nbsp; font-size: 1.25rem;&nbsp; color: #fff;&nbsp; background-color: orange;}.content-bottom {&nbsp; margin-top: 300px;&nbsp; min-height: 1000px;}<div class="image-wrapper">&nbsp; <img class="image"&nbsp; src="https://www.gstatic.com/webp/gallery/1.webp">&nbsp; <img class="image"&nbsp; src="https://www.gstatic.com/webp/gallery/2.webp"></div><div class="content-wrapper">&nbsp; <div class="content">&nbsp; &nbsp; <h1>Lorem</h1>&nbsp; </div>&nbsp; <div class="content content-bottom">&nbsp; &nbsp; <h2>Ipsum</h2>&nbsp; </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 {&nbsp; display: flex;&nbsp; flex-flow: row wrap;}.flexrow > .image {&nbsp; flex: 0 1 50%;&nbsp; min-height: 350px;&nbsp; background-size: 100%;}.img1 {&nbsp; background-size: cover;&nbsp; background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;}.img2 {&nbsp; background-size: cover;&nbsp; background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;}.content {&nbsp; text-align: center;&nbsp; padding: 100px 30px;&nbsp; font-size: 1.25rem;&nbsp; color: #fff;&nbsp; background-color: orange;}<div class="content">&nbsp; <h1>Lorem</h1></div><div class="flexrow">&nbsp; <div class="image img1"></div>&nbsp; <div class="image img2"></div></div><div class="content">&nbsp; <h1>Ipsum</h1></div>认为这就是您正在寻找的，请记住，当没有可用空间（调整大小、低分辨率时）时，图像上的 min-height 属性可能会破坏此纵横比。