如何使 div 响应的背景图像？答案

【问题标题】：How to make background image for a div responsive?如何使 div 响应的背景图像？
【发布时间】：2016-05-17 00:17:58
【问题描述】：

我如何使用引导程序的img-responsive 到div，如下所示：

<div class="fill" style="background-image:url
                                            ('./images/abc.jpg');">
</div>

虽然我尝试在div 中添加img-responsive 类以及fill，但它不起作用。如何使上述div 的背景图像具有响应性？

【问题讨论】：

您希望背景图像完全填充 div（裁剪）还是希望背景缩放以适应（信箱）？

标签： html css image twitter-bootstrap-3

【解决方案1】：

div {
    background-image:url('./images/abc.jpg');
    background-repeat:no-repeat;
    background-size:contain;
}

【讨论】：

【解决方案2】：

如果 background-size 属性设置为“contain”，背景图像将缩放，并尝试适应内容区域。但是，图像会保持其纵横比（图像的宽高比例关系）：

         div {
              width: 100%;
              height: 400px;
              background-image: url('img_flowers.jpg');
              background-repeat: no-repeat;
              background-size: contain;
              border: 1px solid red;
             }

如果 background-size 属性设置为“100% 100%”，则背景图片将拉伸以覆盖整个内容区域：

        div {
             width: 100%;
             height: 400px;
             background-image: url('img_flowers.jpg');
             background-size: 100% 100%;
             border: 1px solid red;
           }

如果 background-size 属性设置为“cover”，则背景图像将缩放以覆盖整个内容区域。请注意，“cover”值保持纵横比，并且可能会剪切背景图像的某些部分：

      div {
           width: 100%;
           height: 400px;
           background-image: url('img_flowers.jpg');
           background-size: cover;
           border: 1px solid red;
          }

【讨论】：

【解决方案3】：

看，使用 background-size 属性有一个很好的技术

.fill {
    background: url(path/to/img.jpg) center center no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
}

此规则将使您的背景图像覆盖所有容器空间并在缩放窗口时进行调整。

【讨论】：

【解决方案4】：

使用background-size 属性到100% auto 的值来实现你正在寻找的东西。

例如，

.fill{
   background-size:100% auto;
}

【讨论】：