Создание ответного div с динамическим фоном

Question

Я создаю сайт, используя статический построитель страниц под названием Hugo (написанный в GO), который динамически извлекает фоновое изображение. Я использую bootstrap v3 в качестве базовой темы.

<div style="background-image: url('{{ .path-to-dynamic-file }}');"> 

Мне нужно загрузить меньшие версии изображения для мобильных устройств. Я создам дополнительное поле в cms, чтобы потянуть за мобильное изображение. Однако я не могу ссылаться на файл через css, поскольку путь изменится при выборе нового изображения. Я бы предпочел не создавать дубликаты div, поскольку внутри него есть текстовый контент.

Является ли мой единственный вариант смены образа на основе java-скрипта или есть причудливая техника, которую я пропустил. Это должно быть очень распространенным требованием, поэтому мне было бы интересно услышать подходы людей к этому.

Answer 1

Вы можете использовать атрибут media в объявлении css. Смотрите эту ссылку:

HTML media Attribute

Answer 2

<div class="dyna-bg-img"></div> 
<style> 
.dyna-bg-img{ 
background: rgba(0,0,0,0) url('{{ .path-to-dynamic-file-for-desktop }}') no-repeat center center; 
} 
@media all and (max-width: 500px) { 
.dyna-bg-img{ 
background-image: url('{{ .path-to-dynamic-file-for-mobile }}'); 
} 
} 
</style> 

первая очередь, не оказывает ваш инлайн изображения с любым тегом. создайте тег «стиль» и вызовите изображение в своем макете. этот код уменьшит использование «! important». и это будет работать как шарм!

Answer 3

В моем случае, используя тег стиля в HTML файле решить мои требования:

<style> 
     .hero-long { 
     background-image: url('{{ .Params.media_item_2.api_object.fields.file.url }}'); 
     } 

     @media (min-width: 768px) { 
     .hero-long { 
      background-image: url('{{ .Params.media_item.api_object.fields.file.url }}'); 
     } 
     } 

</style>