Html 将div置于div顶部，使div一起响应

我正在做一个项目，在这个项目中，我将移动应用程序模型（.jpg在一个可滚动的div中）叠加到移动设备（div带有背景img）上。我不知道如何在设备屏幕的区域内安装模型，使设备和模型根据视口高度（vh）一起缩放

当你观看小提琴时，它会更有意义：

HTML:

<div class="device">

  <div class="screen">
    <img class="screen-display" src="http://chriseddie.com/stack/sample.jpg">
  </div>

</div>

.device {
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url("http://chriseddie.com/stack/apple-iphone-7-silver.jpg");
}

.screen {
  height: 70vh;
  width: 25%;
  padding-left: 1px;
  overflow: scroll;
  position: absolute;
  left: 0;
  right: 0;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
}

.screen-display {
  width: 100%;
}

---

由于要按视口高度缩放设备和屏幕div的高度，因此还需要以相同的方式缩放屏幕的宽度。你遇到的问题是，你已经切换到%。您还需要对屏幕的上边距执行相同的操作，而不是使用固定值。尝试更改以下内容：

.screen {
  width: 40vh;
  margin-top: 15vh;
}

---

由于要按视口高度缩放设备和屏幕div的高度，因此还需要以相同的方式缩放屏幕的宽度。你遇到的问题是，你已经切换到%。您还需要对屏幕的上边距执行相同的操作，而不是使用固定值。尝试更改以下内容：

.screen {
  width: 40vh;
  margin-top: 15vh;
}

---

我一读到你的回复，就觉得很有道理！非常感谢你解决了我的问题。我一看到你的回复，我就明白了！非常感谢你解决了我的问题。