如何使div響應的背景圖像？

Question

我如何使用img-responsive的bootstrap到div ，如下所示：

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

當我嘗試在div沿着fill添加img-responsive類時，它不起作用。 如何使以上div的背景圖像具有響應性？

Answer 1

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

Answer 2

1. 如果將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; } 

2. 如果background-size屬性設置為“ 100％100％”，則背景圖像將拉伸以覆蓋整個內容區域：

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

3. 如果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可以100% auto實現您想要的。

例如，

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