@ae0lian

Background-size cover для retina экранов?

При замене через media-query изображение на ретиновое надо указать в background-size ширину оригинального изображения, при это теряется возможность указать background-size: cover. Как лучше верстать при таком варианте. Фотография размещается в фоне шапки сайта.
<div class="banner"
            style="background: url('assets/images/projects/fabulous/header-banner.png') no-repeat center; background-size: center;">
            <h1 class="banner__title">
                    Title of Project
            </h1>
        </div>

.banner
        height: 1170px
        display: flex
        align-items: center
        justify-content: center
        box-shadow: 0 0 18px 0 rgba(0, 0, 0, 0.3)
        @media only screen and (-webkit-min-device-pixel-ratio: 1.25), only screen and (min--moz-device-pixel-ratio: 1.25), only screen and (-o-min-device-pixel-ratio: 1.25 / 1), only screen and (min-device-pixel-ratio: 1.25), only screen and (min-resolution: 200dpi), only screen and (min-resolution: 1.25dppx)
            background: url('../assets/images/projects/fabulous/header-banner@2x.png') no-repeat center !important
            background-size: 1050px auto!important
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
SmthTo
@SmthTo
Все перепёлки мира будут оплакивать мою смерть
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  /* Тут ваш код для чистой retina, начинающейся от минимального размера viewport в два раза меньше физического или, если нет поддержки первого свойства, от от разрешения в 192DPI */
  
}

Вот пример, где работает cover везде и безо всяких проблем. Проверяется это тем, что там две картинки на фон, первая с надписью X1 (обычная), вторая — с надписью X2 (retina). Везде background-size: cover. И всё работает:



На обычном экране грузит X1:

5d517b143bb0a556931245.png

На экране, который проходит проверку retina — X2

5d517bafeed0c135455260.jpeg

Android Chrome тоже всё понимает и, если экран высокого разрешения, использует retina-вариант (X2):

5d517f4f33c14418788499.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
iDWELL Москва
от 220 000 до 250 000 руб.
8BIT GROUP Москва
от 140 000 до 200 000 руб.
ИНФИНИТУМ Москва
от 150 000 руб.
21 авг. 2019, в 00:43
500 руб./за проект
21 авг. 2019, в 00:14
1000 руб./за проект