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

Posted 2023-03-06

【中文标题】如何使 div 响应的背景图像？

【英文标题】：How to make background image for a div responsive?

【发布时间】：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（裁剪）还是希望背景缩放以适应（信箱）？

【参考方案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;