Как использовать изображение с адаптивным стилем изображения в качестве фона?
Нам необходимо использовать модуль Отзывчивое изображение . Ключ в том, что мы хотим иметь возможность использовать поле изображения (field_image) с адаптивными стилями изображения в качестве фона и помещать заголовок узла поверх них.
Как мы можем этого достичь?
Мы попробовали следующее, но это позволяет получить только исходную фотографию в шаблоне ветки. Другими словами, когда я использую инструменты разработки Chrome, чтобы узнать, извлекал ли он другие изображения как часть отзывчивого Настройки стиля изображения, он их не извлекает.
<div class="wrapper">
<div class="wrapper__image" style="background-image: url('{{file_url(content.field_image.0['#item'].entity.uri.value)}}>
</div>
<div class="wrapper__content"> {# title goes here #} </div>
</div>
Пример изображения:
В настоящее время мы используем готовый шаблон с адаптивным изображением ветки
{% if output_image_tag %}
{{ img_element }}
{% else %}
<picture>
{% if sources %}
{#
Internet Explorer 9 doesn't recognise source elements that are wrapped in
picture tags. See http://scottjehl.github.io/picturefill/#ie9
#}
<!--[if IE 9]><video style="display: none;"><![endif]-->
{% for source_attributes in sources %}
<source{{ source_attributes }}/>
{% endfor %}
<!--[if IE 9]></video><![endif]-->
{% endif %}
{# The controlling image, with the fallback image in srcset. #}
{{ img_element }}
</picture>
{% endif %}
2 answers
То, что вы пытаетесь, не будет работать на фоновом изображении. Вам нужно будет сделать это самостоятельно с помощью javascript. Как я делал это ранее, в div добавляются атрибуты данных для каждой точки останова, например
<div data-mobile-image="mobilestylename/aaa.jpg" data-desktop-image="desktopstylename/aaa.jpg">
Затем в javscript используйте matchmedia или класс body, если он уже добавлен вашей темой, чтобы узнать, в какой точке останова вы находитесь, а затем выполните
var mobile_image = $('.mydiv').data('mobile-image');
$('.mydiv').css('background-image',mobile_image);
Вы можете разрешить адаптивную разметку изображения из ядра:
<div class="wrapper">
<div class="wrapper__image">{{ content.field_image }}</div>
<div class="wrapper__content"> {# title goes here #} </div>
</div>
И используйте свойство CSS , соответствующее объекту на вашем адаптивном изображении:
.wrapper__image {
position: relative;
width : 100%
height : 100vh
}
.wrapper__image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.wrapper__image img {
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
Вы можете легко найти полифайлы JavaScript, чтобы включить эту функцию в IE.