Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Переключение на изображения высокого разрешения для полноэкраного режима

21 марта 2018 | Опубликовано в css | Нет комментариев »

Использование версий изображений для экранов 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

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

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




Оставить ответ


восемь − = 2

Вставить изображение