Question

我正在开发一个项目，我在移动设备（div with background img）上叠加移动应用程序模型（.jpg中的可滚动div）。我无法弄清楚如何在设备屏幕区域内放置模型，使设备和模型基于视口高度（vh）缩放在一起。

当你查看小提琴时，它会更有意义：https://jsfiddle.net/chriseddie/yt2adq16/2/

HTML：

<div class="device">

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

</div>

CSS：

.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%;
}

Answer 1

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

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

使div在div之上响应在一起

1 个答案: