HTML 和 CSS 背景图像缩放以适应屏幕答案

【问题标题】：HTML and CSS background image scaling to fit screensHTML 和 CSS 背景图像缩放以适应屏幕
【发布时间】：2014-05-09 11:26:01
【问题描述】：

我目前正在构建我的投资组合网站。我正在使用 HTML 和 CSS。我有一张用于背景的图像，但无论屏幕大小如何，背景都保持相同大小。我应该使用什么代码？我应该将我的代码升级到 CSS3/HTML5 吗？如果是，那么代码是什么？非常感谢您的时间和提前提供的帮助，这是一个让我发疯的细节，并且在展示我的作品时会遇到很大的麻烦。

【问题讨论】：

CSS background image to fit width, height should auto-scale in proportion的可能重复

标签： html css resize background-image scaling

【解决方案1】：

background-size : 100% auto

这会将宽度设置为 100%，将高度设置为自动

在您发布问题之前始终搜索好，这对于初学者来说可能是一个很好的参考：

http://www.w3schools.com/cssref/css3_pr_background-size.asp

【讨论】：

【解决方案2】：

看看下面的代码：

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;
}

【讨论】：

在 Android 上，它仅在使用 html, body {...} 而不是 body {...} 时有效。