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

Question

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

• > How can get the div background image to scale to the page size?
• > Fit website background image to screen size
• > Stretch and scale a CSS image in the background - with CSS only

我正在尝试创建类似于此站点的效果(以Bootstrap官网为例):http://riot.design/en/ .尝试调整浏览器大小，您会发现背景 img 始终可以缩放并适合。

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

Answer 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/