Html 背景图像拉伸 Div 的 100% 高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13534884/
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
Background Image Stretch 100% Height of Div
提问by Jon
I have a container that will grow/shrink in height based on how much text is dynamically placed inside it. The container will have a background image that needs to stretch/shrink as the container changes height and this image cannot be cropped in any way. I am wondering how would I style .containerto get the background-image to be stay 100% of the div.
我有一个容器，它会根据动态放置在其中的文本数量来增加/收缩高度。容器将有一个背景图像，当容器改变高度时需要拉伸/收缩，并且不能以任何方式裁剪此图像。我想知道我将如何.container设置背景图像以保持 100% 的 div。
I have tried the following, but it didn't seem to work:
我尝试了以下方法，但似乎没有用：
.container { background: url('backgroundImage.jpg') 0 100% no-repeat; }
Sample of HTML Structure:
HTML 结构示例：
<div class="container">
<p class="text">This is a short container</p>
</div>
<div class="container">
<p class="text">This<br> is<br> a<br> tall<br> container</p>
</div>
回答by Henrik
You need to set the background-sizeproperty.
background-size: 100% 100%;will scale it to fill the container both horizontally and vertically.
您需要设置该background-size属性。
background-size: 100% 100%;将缩放它以水平和垂直填充容器。
I usually prefer background-size: cover;as it gracefully scales up the image as needed, maintaining the aspect ratio. Make sure to check the supportfor background-size, as it is a fairly new property.
我通常更喜欢background-size: cover;它根据需要优雅地放大图像，保持纵横比。确保检查对 background-size的支持，因为它是一个相当新的属性。
回答by Nizam Kazi
In case background-size: contain;is not helpful and if you are looking for full HEIGHT background image without loosing aspect ratio then use below written CSS
如果background-size: contain;没有帮助，并且您正在寻找完整的高度背景图像而不会失去纵横比，请使用下面编写的 CSS
background-size: auto 100%;
setting first parameter to "auto" will ensure that image keep width in ratio of current height. Second parameter which is "100%" will help background image adapt same height as DIV.
将第一个参数设置为“ auto”将确保图像保持宽度与当前高度的比率。第二个参数“ 100%”将帮助背景图像适应与 DIV 相同的高度。
回答by gregory
Did you try background-size: cover;?
你试了background-size: cover;吗？
In your example you're adjusting background-position.
在您的示例中，您正在调整background-position.
回答by defau1t
There is a property in css3 called as background-size:cover; and background-size:contain;. You might want to use background-size:cover;to suit your needs.
css3 中有一个属性叫做 background-size:cover; 和背景大小：包含；。您可能想要使用background-size:cover;来满足您的需求。
**contain
**contain
Specifies that the background image should be scaled to be as large as possible while ensuring both its dimensions are less than or equal to the corresponding dimensions of the background positioning area.
指定背景图像应尽可能放大，同时确保其尺寸小于或等于背景定位区域的相应尺寸。
cover
Specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
指定背景图片应尽可能缩小，同时确保其尺寸均大于或等于背景定位区域的相应尺寸。
**
**
