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

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>

Fiddle 以上代码 here.

我也曾尝试使用此 post but was unable to get it to work with side by side images. (see fiddle)

中的 jQuery 函数

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

Answer 1

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

认为这就是您要找的东西，请记住，当没有 space 可用时（调整大小时，低分辨率），图像上的最小高度属性可能会破坏此纵横比。

Answer 2

正如其他人所指出的，我认为您无法通过背景图片实现您的目标...

所以我尝试了另一种方法，主要包括： - 有两个部分：一个用于图像，另一个用于内容。 - 至于图像，将它们包装到一个元素中并使用固定位置。它们位于元素的最顶部，如果你想改变它，你可以使用 top 属性。 - 至于内容，两个区域也都包装在一个绝对位置的容器中。 - 底部的内容将负责图像中的 'breathing' space，因此，您需要使用 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 3

正如 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>

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

Side by side parallax images while keeping aspect-ratio

html

css

background-image

parallax

aspect-ratio