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

有几种选择。选择最适合你的。

如果您希望图片全部可见并填充所有背景，请使用background-size:100vw 100vh或100% 100%。
注意：如果图像的形状与窗口形状不同，则会使图像失真。
＆＃13;
＆＃13;
```
    html {
      height:100%;
      background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;
      background-size:100vw 100vh;
    }
```
＆＃13;
＆＃13;
＆＃13;
要让图像在没有失真的情况下填满屏幕，您可以使用cover 注意：如果图像的形状与窗口形状不同，则会裁剪图像。
＆＃13;
＆＃13;
```
    html {
      height:100%;
      background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;
      background-size:cover;
    }
```
＆＃13;
＆＃13;
＆＃13;
要使图像尽可能大，不要裁剪或扭曲，请使用contain。
注意：如果图像形状不同，则不会填满整个窗口。
＆＃13;
＆＃13;
```
    html {
      height:100%;
      background:#CCC url(http://lorempixel.com/g/500/500) center no-repeat;
      background-size:contain;
    }
```
＆＃13;
＆＃13;
＆＃13;

Answer 2

最简单的方法是：

function uniq(collection, fn) {
  var uniqCollection = collection.filter(function(item, index, self) {
    return self.indexOf(item) === index;
  });
}

function uniq(collection, fn) {
  var obj = {};
  var uniqArr = [];
  for (var key in obj) {
    uniqArr.push(key);
  }
  return fn(uniqArr);
}

var names = ['Tyler', 'Cahlan', 'Ryan', 'Colt', 'Tyler', 'Blaine', 'Cahlan'];
uniq(names, function(uniqArr) {
  console.log('The new names array with all the duplicate items removed is ', uniqArr);
});

你可以在这里看到其他方式来解决这个问题： https://css-tricks.com/perfect-full-page-background-image/

我希望我可以帮助你。

可扩展的全屏图像

2 个答案: