Question

我如何使用img-responsive引导至div，如下所示：

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

虽然我尝试在img-responsive div内fill添加div课程，但它无法正常工作。如何为上述{{1}}响应式制作背景图片？

Answer 1

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

Answer 2

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

         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;
          }

Answer 3

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

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

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

Answer 4

将background-size属性用于100% auto的值，以实现您的目标。

例如，

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

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

4 个答案: