Как сделать фоновое изображение для div отзывчивым?

Question

Как я мог бы использовать img-responsive бутстраповского к div следующим образом:

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

В то время как я пытаюсь добавить img-responsive класс внутри div вдоль fill он не работает. Как я могу сделать фоновое изображение для вышеописанного div отзывчивым?

Answer 1

Используйте background-size property for value of 100% auto, чтобы получить то, что вы ищете.

Например,

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

Answer 2

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

Answer 3

1. Если свойство фон-размер установлен в положение "содержать", фоновое изображение будет масштабироваться, и пытаются втиснуть область содержимого. Тем не менее, изображение будет держать его пропорции (пропорциональная взаимосвязь между шириной и высоты изображения):

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

2. Если свойство фон-размер установлен в положение «100% 100%», фоновое изображение будет растягиваться чтобы покрыть всю область содержимого:

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

3. Если свойство фон-размер установлен на «покрытие», фоновое изображение будет масштабироваться, чтобы охватить всю область содержимого. Обратите внимание на то, что значение «крышка» сохраняет соотношение сторон, а некоторая часть фонового изображения может быть обрезан:

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

Answer 4

Посмотрите, есть хороший метод с использованием фон-размер свойство

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

Это правило заставит ваше фоновое изображение покрыть все пространство контейнера и настроить при масштабировании окна.