javascript - 有没有办法让响应式视差图像始终占据 100% 的视点？

Question

我一直在关注这个 solution为我右侧网格中的视差图像添加响应。除了图像没有占据整个视点外，响应能力运行良好。

我在图片周围加了一个红色边框来表示:https://jsfiddle.net/65r3bth1/3/

当它变得有响应时，图像不会填满视点的左侧，除非我更改背景大小并弄乱我的背景定位。是否可以确保我的图像占据整个视点，同时保持其响应能力？

.image-greet {
    background: url("http://placekitten.com/g/800/800")
    calc(75% + 120px) 50px /120px auto;
    /*calc (middle of right grid + how pushed to the rigth) how far push down from top / zoom*/
    border-top: 20px;
    background-size: 40% auto;
    width: 78%;
    height: 12%;
    margin: 15% auto 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    border: 1px solid red;
}

是否可以确保我的图像占据 100% 的视点，同时在其原始背景位置保持响应能力？

谢谢!

Answer 1

您所遵循的解决方案可以使用 CSS 实现，无需 JS，as you can see in this fiddle .希望这对您有所帮助!

.body {
  display: flex;
}

.container {
  border: 1px solid red;
  width: 100%;
  height: 400px;
  margin-top: 50px;
}

.sidebar {
  height: 2000px;
  width: 50px;
  background-color: #333333;
  margin-right: 30px;
}

.bg {
  background: url('https://loremflickr.com/320/240');
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  display: block;
}

<div class="body">
  <div class="sidebar"></div>

  <div class="container">
    <div class="bg"></div>
  </div>
</div>