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

Mic*_*Obi 5 css background background-image viewport viewport-units

所以我尝试用 100vh 在封面上设置图像 - 但我有非常具体的情况。

在我的图像中,我有一个大盘子和平板电脑“躺在”这个盘子上。

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

检查我的“整页”选项,看看我在说什么。

我还尝试在没有平板电脑的情况下制作此图像封面,然后尝试使用平板电脑和 放置另一张图像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);
}
Run Code Online (Sandbox Code Playgroud)
<body>
  <div class="cover">
  </div>
</body>
Run Code Online (Sandbox Code Playgroud)

小智 8

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

background-position: bottom right;
Run Code Online (Sandbox Code Playgroud)