Html CSS 拉伸或适合背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26774183/
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
CSS stretch or fit background image
提问by m0j1
I wanted to stretch or fit my background image using css so it is always in 100% of width and height no matter what the screen size is. This is asked many times and everyone suggests to use background-size:100% and it will work. but using background-size only fits my image's width and the height is still cropped.
I'll appreciate if someone can help me with this.
Thans very much
我想使用 css 拉伸或适合我的背景图像，因此无论屏幕大小如何，它始终处于宽度和高度的 100%。这被问了很多次，每个人都建议使用 background-size:100% 并且它会起作用。但是使用 background-size 只适合我的图像的宽度并且高度仍然被裁剪。
如果有人可以帮助我，我将不胜感激。
比非常
回答by Goos van den Bekerom
EDIT:
编辑：
You tried background-size: 100%,
CSS interprets this as 100% width, automatic heightwhich will look like this:
您尝试过background-size: 100%，
CSS 将100% width, automatic height其解释为如下所示：
background-size: 100% auto;
What you want is the second argument (height) to be 100% too, so you should do this:
你想要的是第二个参数（高度）也是 100%，所以你应该这样做：
background-size: 100% 100%;
END EDIT
结束编辑
Try:
尝试：
background-size: cover;
This will fit the width or height and overflow the rest
这将适合宽度或高度并溢出其余部分
Or:
或者：
background-size: contain;
This will make the image as large as possible without changing it's aspect ratio.
这将使图像尽可能大而不改变它的纵横比。
You can read more about the css3 background-size property HERE
您可以在此处阅读有关 css3 background-size 属性的更多信息
回答by tim
You can try:
你可以试试：
background: url('Your image URL') 100%;
or
或者
background: url('Your image URL') 100% no-repeat;
回答by Arber Braja
Try this CSS rule:
试试这个 CSS 规则：
background-repeat: no-repeat;
background-attachment: scroll;
background-position: center center
background-size: cover; // this makes img full-screen (full-width & full-height)
