Отзывчиво показывать разные фоновые изображения на экранах разных размеров с помощью attr ()
Проблема в том, что из моей CMS (скажем, в WordPress для аргументов) я могу получить различные размеры фонового изображения для баннера на моей странице. Эти размеры кадрирования генерируются для разных размеров экрана (на основе мобильного телефона, планшета, ноутбука и т. Д.).
Я хотел бы иметь возможность отображать все URL-адреса изображений различных размеров кадрирования в качестве атрибутов для элемента DOM баннера, а затем во внешнем документе CSS использовать медиа-запросы, чтобы выбрать правильный для отображения. Причина, по которой я хочу это сделать, заключается в том, что я могу написать PHP для динамического предоставления обрезанных изображений на разных страницах.
Что-то вроде HTML:
<div style="background-image:url('/img/sm-background-image.jpg')"md-background-image="url('/img/md-background-image.jpg')"> ...
CSS:
@media (min-width: 768px) {
.background-image-style {
background-image: attr('md-background-image')!important; /* All screen sizes above the smallest and default size */
}
}
Таким образом, вся ширина экрана 768 пикселей или больше будет отображать изображение, представленное в md-background-image атрибут и все, что ниже этого размера будет показывать по умолчанию background-image определены в style приписывать.
я могу увидеть это attr() не поддерживается для background-image в настоящее время и хотя для этого есть возможности в будущем, я не могу использовать его сейчас.
Решение
Я достиг желаемого эффекта, используя комбинацию CSS var() метод и style приписывать.
Мой PHP-код выглядит примерно так:
<div class="banner-image" style="--xl-background-image:url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>');
--lg-background-image:url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>');
--md-background-image:url('<?php echo $image['sizes']['md_header_banner_wide']; ?>');
background-image:url('<?php echo $image['sizes']['sm_header_banner_wide']; ?>')">
Который отображает HTML:
<div class="banner-image" style="--xl-background-image:url('/wp-content/uploads/2019/02/Products-Header-1489x600.jpg');
--lg-background-image:url('/wp-content/uploads/2019/02/Products-Header-1400x564.jpg');
--md-background-image:url('/wp-content/uploads/2019/02/Products-Header-1024x413.jpg');
background-image:url('/wp-content/uploads/2019/02/Products-Header-768x309.jpg')">
Поэтому я могу использовать следующую комбинацию CSS и медиа-запросов, чтобы показать различные изображения в зависимости от размера экрана клиента в моем внешнем style.css файл:
@media (min-width: 768px){
.banner-image {
background-image: var(--md-background-image)!important;
}
}
@media (min-width: 992px){
.banner-image {
background-image: var(--lg-background-image)!important;
}
}
@media (min-width: 1200px){
.banner-image {
background-image: var(--xl-background-image)!important;
}
}
Я проверил это на Chrome & FireFox (в Windows) и Safari (в Mac) с инструментами разработчика, и я не заметил никаких проблем с сопоставимостью.
Альтернативный подход:
В качестве альтернативы я понял, когда писал свое решение, что рискованный подход может заключаться в том, чтобы визуализировать мои стили непосредственно на странице. Я предполагаю, что это просто вопросы совместимости и / или стандартов кодирования, которые разделяют две возможности.
<style type="text/css">
@media (min-width: 768px){
.banner-image {
background-image: '<?php echo $image['sizes']['md_header_banner_wide']; ?>'!important;
}
}
@media (min-width: 992px){
.banner-image {
background-image: url('<?php echo $image['sizes']['lg_header_banner_wide']; ?>')!important;
}
}
@media (min-width: 1200px){
.banner-image {
background-image: url('<?php echo $image['sizes']['xl_header_banner_wide']; ?>')!important;
}
}
</style>
Другие решения
Других решений пока нет …