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
HTML and CSS background image scaling to fit screens
提问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 :
在发布问题之前始终进行搜索,作为初学者,这可能是一个很好的参考:
回答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;
}