可缩放的全屏图像

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;    

        }

我的图片比浏览器视口大，但它没有缩放，所以整个图片都适合，而是底部被切掉了。

我怎样才能让它与浏览器一起缩放？如果有任何帮助，我正在使用 bootstrap。

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

有几个选项。选择最适合你的。

如果您希望图像全部可见并填充所有背景，请使用 background-size:100vw 100vh 或 100% 100%。
注意：如果图像与 window.
的形状不同，这将扭曲图像
```
    html {
      height:100%;
      background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;
      background-size:100vw 100vh;
    }
```

要使图像无失真地填满屏幕，您可以使用 cover。
注意：如果图像的形状与 window.

不同，这将裁剪图像

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

要让您的图片尽可能大而不被裁剪或扭曲，请使用 contain。
注意：如果图像的形状不同，这将不会填满整个 window。

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

可缩放的全屏图像

Full screen image that scales

css

image

fullscreen