jQuery 使用引导程序 3 使 div 背景图像响应
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19752749/
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
make div background image responsive with bootstrap 3
提问by b24
How make div with background image responsive with bootstrap 3 ??
如何使用 bootstrap 3 使 div 与背景图像响应?
Is it possible with img-responsive class in bootstrap 3 ??
Bootstrap 3 中的 img-responsive 类是否有可能?
My div is empty like below:
我的 div 是空的,如下所示:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="workflowstep workflowstep1 img-responsive">
</div>
<div class="workflowstep workflowstep2 img-responsive">
</div>
<div class="workflowstep workflowstep3 img-responsive">
</div>
<div class="workflowstep workflowstep4 img-responsive">
</div>
<div class="workflowstep workflowstep5 img-responsive">
</div>
<div class="workflowstep workflowstep6 img-responsive">
</div>
</div>
</div>
回答by Sobin Augustine
I think its not the case to use img-responsive
here, since it was for <img />
我认为img-responsive
这里不是这样使用的,因为它是为了<img />
and for making the div
background image responsive, we can use background-size: cover;
为了使div
背景图像具有响应性,我们可以使用background-size: cover;
background-size: cover;
Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area
背景尺寸:封面;
将图像缩放到最小尺寸,同时保留其固有纵横比(如果有),使其宽度和高度都可以完全覆盖背景定位区域
回答by Mr_Green
To make background-image responsive, you can use background-size: cover
CSS property. or if you want to stretch the background-image with resize in the div, use background-size: 100% 100%
.
要使背景图像响应,您可以使用background-size: cover
CSS 属性。或者,如果您想在 div 中使用调整大小来拉伸背景图像,请使用background-size: 100% 100%
.
For more info on background-size
CSS property go through this link.
有关background-size
CSS 属性的更多信息,请访问此链接。