将背景图像缩放到用户的浏览器大小答案

【问题标题】：Scale background img to the user's browser size将背景图像缩放到用户的浏览器大小
【发布时间】：2016-03-16 20:53:11
【问题描述】：

我已经浏览了 stackoverflow 中的所有相关答案，但没有找到最合适的答案。无论用户如何尝试调整浏览器的大小，我都试图使 .background img 适合用户的浏览器大小。一些相关的问题是：

我正在尝试创建一个类似于这个网站的效果（在Bootstrap官网上有提到作为例子）：http://riot.design/en/。尝试调整浏览器的大小，您会发现背景图片总是可以缩放和适合。

有没有什么好的方法可以达到这个效果？

【问题讨论】：

您帖子中的最后两个示例很好。你不喜欢他们什么？
jsfiddle.net/46t4qLfa这是你需要的吗？
背景：封面；似乎效果不佳.. 我在 riot.design/en 寻找相同的效果。感谢您的帮助！

标签： javascript html css image

【解决方案1】：

你可以在你的 CSS 中尝试这样的事情。

html { 
  background: url(http://7-themes.com/data_images/out/60/6975736-   
android-background.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/

【讨论】：

【解决方案2】：

在我制作fiddle 时，litlitDM 击败了我。我的代码与他/她的代码略有不同。确保 url 使用单引号或双引号。使用 litlitDM 提供的回退总是一个好主意。我喜欢使用postition: absolute，但如前所述，css-tricks 是一个很好的资源，因为有很多方法可以做到这一点。

【讨论】：