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>

有没有办法让响应视差图像始终占据100％的视点？

1 个答案: