使用引导程序 3 使 div 背景图像响应答案

【问题标题】：make div background image responsive with bootstrap 3使用引导程序 3 使 div 背景图像响应
【发布时间】：2013-11-14 04:30:28
【问题描述】：

如何使用 bootstrap 3 使带有背景图像的 div 响应？？

是否可以在 bootstrap 3 中使用 img-responsive 类？？

我的 div 是空的，如下所示：

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="workflowstep workflowstep1 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep2 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep3 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep4 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep5 img-responsive">&nbsp;
        </div>
        <div class="workflowstep workflowstep6 img-responsive">&nbsp;
        </div>
    </div>
</div>

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

我认为这里不能使用img-responsive，因为它是用于<img />

为了使div背景图像具有响应性，我们可以使用background-size: cover;

背景尺寸：封面；

缩放图像，同时保留其固有纵横比（如果有），最小尺寸，使其宽度和高度都可以完全覆盖背景定位区域

【讨论】：

【解决方案2】：

要使背景图像响应，您可以使用background-size: cover CSS 属性。或者，如果您想在 div 中调整大小来拉伸背景图像，请使用 background-size: 100% 100%。

有关background-size CSS 属性的更多信息，请访问link。

【讨论】：

background-size 在 IE8 及更早版本中不起作用，但是您可以使用 CSS3PIE 添加 polyfill（但使用 CSS3PIE 会导致轻微的性能损失）。