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

Question

嘿嘿!任何人都可以建议如何让背景图像完全响应，无论使用哪种设备？ 或者如果屏幕处于纵向模式或横向模式？

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

这是我在尝试了包括 height: 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)。