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

Question

在那里！任何人都可以建议如何使背景图像完全响应，无论哪个设备在？ 或者，如果屏幕处于纵向模式或横向模式？

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

这是我在尝试了所有内容后想出来的，包括身高：自动; width：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

您为某个容器定义了最小高度：720px，因此该容器不会高于720px。要覆盖整个屏幕，您应该定义例如：

最大宽度：100％; 最小高度：100％;

或

min-height：100vh。

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