Адаптивно показывать разные фоновые изображения на экранах разных размеров, используя attr () - PullRequest
Новая
       19

Адаптивно показывать разные фоновые изображения на экранах разных размеров, используя attr ()

0 голосов
/ 01 февраля 2019

Сложность в том, что из моей 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, и, хотя для этого есть возможности в будущем, я не могу использовать его сейчас.

1 Ответ

0 голосов
/ 01 февраля 2019

Я добился желаемого эффекта, используя комбинацию метода 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>
...