javascript - 使用引导程序 3 使 div 背景图像响应

Question

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

引导程序 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>

Answer 1

我认为不是在img-responsive这里使用的情况，因为它是为了<img />

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

背景尺寸：封面；

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

Answer 2

要使背景图像响应，您可以使用background-size: coverCSS 属性。或者，如果您想在 div 中使用 resize 来拉伸背景图像，请使用background-size: 100% 100%.

有关background-sizeCSS 属性的更多信息，请访问此链接。