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

Question

[ae0lian]

При замене через 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/[e-mail]') no-repeat center !important
            background-size: 1050px auto!important

Comments

[Rustam Bainazarov]

Что? Покажите код.

[ae0lian]

Рустам Байназаров, забыл добавить изначально, поправил.

[Rustam Bainazarov]

ae0lian, у меня вопросы…

А зачем там вы указали ему размер, коли вы и так выбрали другой файл по ссылке в свойстве? Поставьте ваш cover туда. И зачем !important?

[ae0lian]

Рустам Байназаров, там же инлайновые стили, а код для ретины из css, поэтому important. Если поставить cover, то изображение ретиновое будет в полном масштабе, а мне нужно, чтобы оно ужалось под оригинально изображение, на ретине же пикселей в 2 раза больше.

[Rustam Bainazarov]

ae0lian, вы, видимо, не совсем понимаете смысл Retina, связи разрешения картинки, экрана и масштабирования.

На Retina-экранах размер viewport в 2, 3, 4 или более раза меньше физического разрешения экрана, поэтому обычные картинки на них смотрятся размытыми, несмотря на то, что viewport может быть всего лишь, например 375px по ширине (iPhone XS) при реальном разрешении 1125px (в 3 раза больше), поэтому картинка должна быть в 3 раза больше, чтобы заполнить реальное разрешение без суб-пиксельного масштабирования.

Ставьте ссылку на ваш retinа-ресурс, и все у вас будет нормально + cover. Он же у вас с разрешением выше, чем обычный?

[ae0lian]

Рустам Байназаров, не будет нормально, это видимо вы плохо понимаете. Надо указать изображению ретиновому ширину оригинального изображения, чтобы браузер ужал ретиновое изображение под нужное отображение. Набросайте пример данный, в инспекторе установите 2х и поймете, что не выйдет с оставленным cover.

[Rustam Bainazarov]

ae0lian, эх, наверное, несколько лет опыта в работе на рынок США действительно могут мне врать...

Ссылку на спецификацию такой работы с Retina можете дать для работы cover? Ибо где вы прочитали, что зачем-то какой-то размер фона с какого-то бока нужно ставить для этого, — я не знаю.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  /* Тут ваш код для чистой retina, начинающейся от минимального размера viewport в два раза меньше физического */
  
}

Ссылка на статью.

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



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



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



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

[ae0lian]

Рустам Байназаров, приношу извинения и мое почтение за терпение, усвоил неправильно информацию и из-за перемешки инлайнового стиля в html разметки и css стилях она как то подтвердилась. Отсюда и была стойкая уверенность. В общем прости меня Рустам, если сможешь.

[Rustam Bainazarov]

ae0lian, прощаю и пишу ответ :))

Answer 1

[Rustam Bainazarov]

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  
  /* Тут ваш код для чистой retina, начинающейся от минимального размера viewport в два раза меньше физического или, если нет поддержки первого свойства, от от разрешения в 192DPI */
  
}

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



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



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



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