将较大的图像移到较小的可见容器中

Question

我正在尝试做一些基本的事情（编程的新手）。 我尝试拍摄大图像和小容器，并在用户滚动时将图像up或down移入内部。

因此您可以。

移动黄色 up或down，同时用户可以在同一位置（保留在文档流中）看到红色。< / p>

如果我使用此图像创建图像：

<div class="cvrContainer top left">
    <div class="cvrPhoto" id="photo0" style="background-image: url(https://picsum.photos/900/850);"></div>
</div>

1. 我应该将cvrPhoto设置为大于cvrContainer说200％吗？
2. 我如何使用JS上下移动，同时保持隐藏的溢出状态。

我不问如何计算，只问如何设置它并在其中移动唯一的黄色

Answer 1

如果要创建简单的视差效果，可以通过固定位置来实现此效果，并在position: fixed div上添加.cvrPhoto。

.cvrContainer {
  padding: 30px;
  width: 100%;
  height: 2000px;
  overflow: auto;
  background: url(https://picsum.photos/900/850);
}

.cvrPhoto {
  height: 300px;
  width: 200px;
  position: fixed;
  top: 57px;
  background: yellow;
}

<div class="cvrContainer style=" background-image: url(https://picsum.photos/900/850); "">
  <div class="cvrPhoto"></div>
</div>

Answer 2

我通过使用css作为内部图像（不是背景图像，而是img标签）解决了这个问题：

.prlxPhoto
{

     position: absolute;
     left: 50%;
     top: 50%;
     -webkit-transform: translateY(-50%) translateX(-50%);

}

并向左/向右移动，例如：

var e = document.getElementById("1");
e.style.marginLeft = equotion+'px';