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

Question

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

现在我拥有的图像覆盖了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

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

max-width：100％;最小高度：100％;

或

最小高度：100vh。

（使用％如果父容器已定义高度，以其他方式使用vh）。