在 iPad/移动设备上缩小页面

Question

喂！任何人都可以建议如何让背景图像完全响应，无论使用哪个设备？ 或者屏幕是纵向模式还是横向模式？

现在我拥有的图像在横向模式下很好地覆盖了 iPad 页面，但在屏幕进入纵向模式时太短了。

这是我在尝试了包括高度在内的所有内容后得出的结论：auto;宽度：自动；

#home {
  background-image: url('london-pic.jpg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  height: auto;
  max-width: 100%;
  min-height: 720px;
  overflow: hidden;
}

Answer 1

您为某些容器定义了 min-height: 720px，因此该容器不会高于 720px。要覆盖整个屏幕，您应该定义例如：

最大宽度：100%； 最小高度：100%；

或

最小高度：100vh。

（如果父容器定义了高度，则使用 %，否则使用 vh）。