可缩放的全屏图像

Question

我正在尝试创建一个具有覆盖整个屏幕的图像的主页，我按照教程进行操作，得到了我想要的东西，但它没有显示整个图像。

我看到很多网站都这样做，所以这一定是可能的，我有一个跨越整个屏幕的图像，但图像并没有真正缩放以适应浏览器，图像的底部被修剪掉了。

html{               
            /* Ensure the html element always takes up the full height of the browser window */
            min-height:100%;    
            position:relative;          
        }

        body {
            background:url('bg.jpg') center center;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size:cover;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;

            /* Workaround for some mobile browsers */
            min-height:100%;

            font-family: 'Asap', sans-serif;    

        }

我的图像比浏览器视口大，但它没有被缩放以适应整个图像，而是将底部切掉。

如何让它与浏览器一起扩展？如果有什么可以帮助的，我正在使用引导程序。

Answer 1

最简单的方法是：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

您可以在此处查看解决此问题的其他方式： https://css-tricks.com/perfect-full-page-background-image/

希望能帮到你。

Answer 2

有多种选择。选择最适合您的。

1. 如果您希望图像全部可见并填充所有背景，请使用background-size:100vw 100vh 或100% 100%。
   注意：如果与窗口的形状不同，这将扭曲图像。

       html {
         height:100%;
         background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;
         background-size:100vw 100vh;
       }

2. 要让图像填满屏幕而不失真，您可以使用cover。
   注意：如果图像与窗口的形状不同，这将裁剪图像。

       html {
         height:100%;
         background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;
         background-size:cover;
       }

3. 要使您的图像尽可能大而不被裁剪或扭曲，请使用contain。
   注意：如果图像不是相同的形状，这不会填满整个窗口。

       html {
         height:100%;
         background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;
         background-size:contain;
       }