Использование версий изображений для экранов Retina на веб-странице в большинстве случаев необязательно. Но если изображения раскрываются на весь экран на мониторе настольного компьютера, обязательно нужно переключиться на версию изображения высокого разрешения по следующим причинам:

• Маленькие изображения будут ужасно выглядеть при растягивании на полный экран, этот вариант совершенно не подходит.

• В большинстве случаев полноэкранный режим будет использоваться только для показа нескольких изображений, что позволяет нам сконцентрироваться на общем решении, а не пытаться выработать отдельные решения для каждого изображения.

• Полноэкранный режим должен быть вызван пользователем, что дает нам возможность подгрузить изображения заранее.

• Полноэкранный режим пока еще не поддерживается мобильными устройствами, так что нам не нужно волноваться о трафике.

Для получения наилучших результатов на данный момент следует совместно использовать атрибут srcset и функцию JavaScript для полноэкранного режима.

Код HTML

<figure id="lake">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg" srcset="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-small.jpg 1600w, https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/lake-large.jpg 2400w" alt="Photograph of Lake Louise, British Columbia">
        <figcaption> Полноэкранный режим с заменой изображений, созданный с помощью атрибута srcset. <button>Нажмите на кнопку</button>, чтобы  перейти в полноэкранный режим. Нажмите клавишу <kbd>ESC</kbd> на клавиатуре, чтобы выйти из полноэкранного режима.
        </figcaption>
</figure>

Использование атрибута srcset гарантирует, что обычная версия изображения будет использована, если ширина экрана устройства меньше или равна 1600 пикселям.

Код CSS

Изображение расположено по центру в полноэкранном режиме с помощью flexbox, подпись изображения в этом режиме спрятана. Обратите внимание, псевдокласс :fullscreen задается с помощью последнего варианта синтаксиса, причем версии с приставками производителей задаются отдельно, так как иногда при объединении их в одну запись браузеры не обрабатывают ее корректно:

#lake {
        position: relative;
        font-size: 0;
}
:-moz-full-screen figcaption {
        opacity: 0;
}
:-webkit-full-screen figcaption {
        opacity: 0;
}
:full-screen #figcaption {
        opacity: 0;
}
#lake figcaption {
        background: rgba(255,255,255,0.75);
        position: absolute; bottom: 0;
        margin: 0; width: 100%;
        padding: 1rem;
        font-size: 1.3rem;
        transition: 1s;
}
#lake img {
        width: 100%;
        height: auto;
}
:-moz-full-screen img {
        width: 100%;
}
:-webkit-full-screen {
        width: 100%;
}
:-moz-fullscreen {
        display: flex;
        align-items: center;
        justify-content: center;
}
:-ms-fullscreen {
        display: flex;
        align-items: center;
        justify-content: center;
}
:fullscreen {
        display: flex;
        align-items: center;
        justify-content: center;
}

Кнопка запрашивает переход в полноэкранный режим с помощью JavaScript:

function launchFullscreen(element) {
        if (element.requestFullScreen) {
element.requestFullscreen();
        } else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
        } else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
        }
}
var lake = document.getElementById("lake"),
fullbutton = lake.getElementsByTagName("button")[0];
fullbutton.onclick = function() {
        launchFullscreen(lake);
}

В результате получаем следующее:

Демонстрация полноэкранного режима с заменой изображений, созданного с помощью атрибута srcset. Нажмите на кнопку, чтобы перейти в полноэкранный режим. Нажмите клавишу ESC на клавиатуре, чтобы выйти из полноэкранного режима.

Не забудьте, что Вам может понадобиться плагин picturefill, который добавляет в браузеры, па данный момент не поддерживающие атрибут srcset, нужные функции для работы этого атрибута.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Создание эффекта отбрасывания тени с использованием CSS и SVG
• Полностью симметричное расположенных заголовков при помощи CSS
• Создание стилей для посещенных ссылок с использованием SVG