100vh 上的背景封面图像 - 屏幕差异

Question

所以我尝试将图像设置为 100vh - 但我的情况非常特殊。

在我的图片上，我有大盘子和平板电脑 "lie down" 在这个盘子上。

我的目标是使这个图像成为 100vh header 但是有一个问题 - 当我尝试在我的大显示器上测试它时它看起来不错，但是在高度较小的显示器上它看起来很糟糕 - 我需要这个平板电脑在所有桌面设备中 100% 可见。

用 "Full page" 选项检查我的 fiddle 以了解我的意思。

我也尝试在没有平板电脑的情况下制作这张图片的封面，然后尝试用平板电脑和 position:absolute 放置另一张图片，但我的第二张图片并不总是在完全相同的位置，与这个盘子内框.

有没有可能实现我想要的？

.cover {
  position: relative;
  height: calc(100vh - 80px);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  background-image: url(https://s4.postimg.org/uwxudv17x/cover.png);
}

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

Answer 1

所有桌面设备的快速解决方法是设置

background-position: bottom right;

100vh 上的背景封面图像 - 屏幕差异

Background cover image on 100vh - screen differences

css

background

background-image

viewport

viewport-units