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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22739285/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:26:14  来源:igfitidea点击:

HTML and CSS background image scaling to fit screens

htmlcssresizebackground-imagescaling

提问by user3435927

I am currently working on building my portfolio website. I am using HTML and CSS. I have an image I am using for my background but the background remains the same size regardless of the size of the screen. What code should I use? Should I upgrade my code to CSS3/HTML5 and if so what would be the code for that? Thank you very much for your time and help ahead of time, this is a detail that is driving me nuts and a huge hang up when showing my work.

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

回答by ProllyGeek

background-size : 100% auto

this gonna set width to 100% and height to auto

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

always search well before you post a question , this might be a good reference as a beginner :

在发布问题之前始终进行搜索,作为初学者,这可能是一个很好的参考:

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

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

回答by manosim

Have a look at the code below:

看看下面的代码:

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