使用bootstrap 3使div背景图像响应

Question

如何使用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>

Answer 1

我认为在这里使用img-responsive并非如此，因为它适用于<img />

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

  

background-size：cover;

     

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

Answer 2

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

有关background-size CSS属性的详细信息，请查看此link。