Создание изображений с адаптивной центровкой с использованием CSS3. Как сделать изображения адаптивными? Адаптивные изображения

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

Давайте для примера добавим на один черновой сайт (wordpress) фото обложку. Открываем любую запись или страницу, загружаем туда уже подготовленную фото обложку для сайта, переходим на вкладку “Текст”, копируем код который мы будем вставлять в файл header.php. Вставляем код фото обложки перед закрывающимся тегом head. Обратите внимание как по умолчанию указаны размеры изображения, они конкретные. То есть, вы делаете обложку под свой размер экрана, а если на ваш сайт зайдёт человек, у которого размер экрана больше вашего, то обложка будет у него отображаться не на весь экран.

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

Чтобы убедиться в том что обложка не будет адаптироваться на больших экранах, заходим на сайт сервиса “quirKtools” , в инструмент “Screenfly” . Вводим в поле адрес нашего сайта, жмём кнопку GO . Вверху страницы выбираем самый большой размер экрана и видим, что обложка не растягивается, то есть не масштабируется, так как в коде указаны конкретные размеры.

Адаптивное изображение на любом экране

Чтобы сделать изображение адаптивным и масштабируемым, чтобы оно адаптировалось под любой размер экрана, нужно внести в код одно простое изменение. В коде изображения обложки, убираем обозначение высоты (height), а для ширины указываем значение – “100%” (смотри скриншот). Сохраняем код.

Снова заходим в сервис “quirKtools” , выбираем самый большой размер экрана и смотрим что теперь обложка сайта адаптируется под самый большой размер экрана.

Ширина изображения будет отображаться на любом устройстве на 100%, то есть на весь экран, а высота изображения будет вычисляться автоматически пропорционально ширине изображения. Если бы вы указали конкретный размер высоты изображения, то изображение отображалось бы искажённым, то есть не пропорциональным.

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

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

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными. Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение. Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

HTML:

CSS:

div.container { width: 96%; max-width: 960px; margin: 0 auto; /* центрируем основной контейнер */ } img { width: 100%; /* ширина картинки */ height: auto; /* высота картинки */ }

Обратите внимание, что элемент будет адаптивным, даже если были заданы фиксированные значения HTML-атрибутов ширины и высоты непосредственно в разметке.

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

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

Приготовил примеры нескольких вариаций исполнения адаптивных изображений, одиночная картинка, изображения в двух и более колонках, а так же пример использования большого фонового изображения с гарантированной адаптивностью. Все варианты основаны на использовании процентных значений для свойства width (ширины) и значении auto для свойства height (высоты) изображений.

img { width : 100% ; height : auto ; }

img { width: 100%; height: auto; }

Базовые значения адаптивного изображения

Начнём с рассмотрения базового примера, когда нам необходимо сделать одиночные картинки используемые в записях, или других отдельных блоках, полностью адаптивными.
Например, у нас есть контейнер, которому мы задали базовую ширину width: 96%; и выставили максимальную ширину в max-width: 960px; , в этом блоке нам необходимо вывести адаптивное изображение.
Для этого элементу внутри контейнера определяем ширину в 100%, так, что его ширина всегда будет равна ширине контейнера, независимо от размера области просмотра. Высоту, соответственно, переводим в автоматический режим, в итоге изображение будет изменяться пропорционально.

div.container { width : 96% ; max-width : 960px ; margin : 0 auto ; /* центрируем основной контейнер */ } img { width : 100% ; /* ширина картинки */ height : auto ; /* высота картинки */ }

Адаптивные изображения в колонках

Иногда мы хотим видеть изображения выстроенные в ряд бок о бок, или например, в виде сетки, для организации простейшей галереи картинок.
Для этого, необходимы лишь внести небольшие изменения в код, который использовали выше, первое, это уменьшить ширину свойство width и задать элементу значение inline-block для свойства display , т.е. сделать его встроенным.
Давайте рассмотрим две компоновочные схемы: расположение картинок в две колонки и макет из трёх столбцов.

1. Макет изображений в две колонки
Для двух-колоночного макета изображений, мы можем установить ширину в 48%, или примерно половину контейнера. Не устанавливаем значения в 50%, для того, чтобы были боковые отступы.

img { width : 32% ; display : inline-block ; }

img { width: 32%; display: inline-block; }

Условная расстановка адаптивных изображений

В следующем примере, мы рассмотрим вариант использования адаптивных картинок с различной расстановкой в зависимости от устройств просмотра, т.е. при просмотре на смартфонах изображения будут отображаться в одну колонку, в две колонки на планшетах, и выстраиваться в четыре колонки на больших экранах.
Для реализации задуманного, применим медиа-запросы @media , указав тип носителя, для которого будет применяться то или иное максимальное значение ширины изображений max-width .

/* Для небольших устройств (смартфоны) */ img { max-width: 100%; display: inline-block; } /* Для средних устройств (планшеты) */ @media (min-width: 420px) { img { max-width: 48%; } } /* Для больших устройств (ноуты, пк) */ @media (min-width: 760px) { img { max-width: 24%; } }

Всё довольно просто, неправда ли? Идея с медиа-запросами отличная, уже довольно давно и широко используемая. Показанные в примере параметры, хорошо работают именно с данным макетом, как поведут себя в других конструкциях, стоит тщательно проверять, так что...

Адаптивное изображение на всю ширину экрана

Для того, чтобы сделать широко-форматные адаптивные изображения, которые заполняют 100% размера окна просмотра, необходимо просто удалить свойство максимальной ширины контейнера max-width (значение в 960px) и установить ему ширину width в 100%. Ширина изображения, так же выставляется в значение 100%.

.container { width : 100% ; } img { width : 100% ; }

Container { width: 100%; } img { width: 100%; }

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

На этом пожалуй и всё. Если вы хотите, для различных устройств, использовать отдельные изображения разного размера, используйте, хуже уж точно не будет. Знаете другие методы сделать изображения адаптивными, пишите в комментариях, обязательно рассмотрим, новое оно всегда интересно.

Каждый веб дизайнер знает, что создание адаптивной верстки является, пожалуй, одной из самых сложных задач, с которой он может столкнуться в своей работе. Проблема заключается не только в том, что необходимо учесть особенности размеров экранов различных устройств и подобрать расположение блоков на сайте таким образом, чтобы веб проект смотрелся красиво как на экране компьютера, так и на мобильном телефоне, но в том, что многие современные девайсы имеют так называемые «ретина»-мониторы с повышенной плотностью пикселей, предъявляющие специальные требования к веб верстке.

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

Традиционный метод с использованием только свойств CSS

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

Простой пример: предположим, вы хотите, чтобы ваш логотип размером 250 x 250 px правильно отображался на экране с двойной плотностью пикселей. В таком случае вам нужно создать другое изображение с логотипом, большее желаемого размера на экране в два раза, т.е. 500 x 500 px.

Теперь необходимо решить основную задачу - как сделать так, чтобы отображение картинки всегда оставалось одинаковым, т. е. ее размер всегда был 250 x 250 px?

Возможно, кому-то в голову сразу же пришла идея написать простой CSS код, что-нибудь наподобие этого:

Img { max-width: 250px; }

Как ни странно, но этот метод не будет работать. Вам необходимо ограничить размер контейнера, который содержит изображение, а не самого изображения. Должно получиться что-нибудь такое:

Div img { max-width: 250px; }

Каковы недостатки этого метода?

Если использовать данный способ верстки для небольших изображений, вроде логотипов или иконок, скорее всего, вы не столкнетесь с проблемами. Однако для больших иллюстраций этот метод не подходит. Разве вам нравится загружать огромные изображения специально для «ретина» устройств, которые даже не смогут отобразить все детали вашей иллюстрации?!

Подумайте о посетителях своего сайта. Что вы скажете человеку, который в спешке пытается прочитать важную информацию с вашего веб ресурса, подключившись через usb-модем, не слишком то хорошо ловящий сигнал связи? Конечно, вы можете потерять определенную часть аудитории, если не подумаете о том, как правильно создавать адаптивный дизайн вашего сайта.

К слову, если вы хотите немного менять дизайн сайта в зависимости от скорости соединения на стороне клиента, вы можете использовать специальную утилиту Foresight.js от Adam Bradley, которая измеряет скорость загрузки 50К изображения.

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

Есть ли альтернатива?

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

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

Современный разработчики создали достаточно большое количество скриптов, выполняющих подобные функции. В качестве примера можно привести специальный Jquery скрипт HiSRC, разработанный Marc Grabanski и Christopher Schmitt, который позволяет загружать один вариант из трех для каждого изображения в зависимости от типа устройства пользователя и скорости Интернета-соединения.

В общем виде HTML-разметка для этого скрипта выглядит так:

В атрибуте src необходимо указать путь до файла с изображением, которое грузится в первую очередь, как правило, самого низкого качества. После загрузки страницы скрипт проверит скорость Интернет-соединения и тип экрана устройства, с которого посетитель зашел на сайт. Если позволяет скорость Интернета, и устройство поддерживает «ретина»-изображения, будет загружена картинка, расположенная по адресу, указанному в атрибуте data-2x, если девайс поддерживает обычные изображения, будет загружена картинка по адресу в атрибуте data-1x, и если не позволяет скорость Интернета, то никаких изменений не будет производиться. Специальный класс, добавленный для изображения, будет указывать скрипту, что с этим элементом DOM необходимо произвести определенные преобразования.

Сам скрипт подключается путем добавления кода:

$(document).ready(function(){ $(".hisrc").hisrc(); });

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

Метод имеет и ряд недостатков. Во-первых, необходимо дополнительно подключать библиотеку Jquery. Во-вторых, метод требует специфической HTML-разметки, что может подходить не всем веб мастерам, так как в некоторых случаях способ вывода -тэга не может быть изменен.

Интересный способ создания адаптивных изображений предлагает сервис Sencha.io Src (на момент написания статьи еще функционирует), который вообще не требует никаких настроек на сервере. Сервис работает по принципу прокси.

Просто вставьте префикс http://src.sencha.io/ перед адресом вашего изображения в атрибуте src, и всю остальную нагрузку на себя возьмет Sencha.io Src. Это бесплатный сервис, позволяющий решить большинство проблем современного веб дизайнера.

К недостаткам сервиса можно отнести то, что, используя его, вы ставите себя в зависимость от функционирования постороннего ресурса, любые сбои в его работе отразятся на вашем сайте, так что я НЕ РЕКОМЕНДУЮ его использовать, да и не только его, а вообще любые сторонние сервисы.

Заключение

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

В этом руководстве мы в деталях изучим технологию создания респонсивного фонового изображения, которое будет занимать всю область просмотра в браузере при любом разрешении. И использовать мы будем CSS — свойство background-size . Без JavaScript :

ПРИМЕР
СКАЧАТЬ ИСХОДНИКИ

Примеры использования адаптивных фоновых изображений

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

Sailing Collective
Digital Telepathy
Marianne Restaurant

Если вы хотите добиться схожей «внешности » в вашем проекте — вы на правильном пути.

Основные понятия

Вот план нашей игры.

Используем свойство background-size для покрытия всей области просмотра

CSS -свойство background-size может принимать значение cover . Значение cover предписывает браузеру автоматически и пропорционально масштабировать фоновое изображение по длине и ширине таким образом, чтобы оно оставалось равным, или же больше, чем ширина/высота области просмотра.

Используем медиа-запрос при получении уменьшенной версии фонового изображения для мобильных устройств

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

Но все же использовать уменьшенные версии фона для мобильных устройств идея неплохая, и я объясню почему.
Изображение, которое будет использовано в примере, имеет размер около 5500 на 3600px .

С этим разрешением мы имеем в плюсе то, что добиваемся покрытия всей области просмотра на большинстве широкоформатных мониторов выпускаемых в настоящее время, но в минусе имеем размер изображения. Это около 1,7 Мб.

Оставлять такой объем для загрузки одного лишь фонового изображения не очень хорошая идея в любом случае, а в случае с мобильными устройствами это очень плохая идея. К тому же, подобное разрешение просто излишне на экранах с маленьким разрешением (об этом я расскажу подробнее позже ).

Итак. Приступим.

HTML

Ниже показано все, что понадобится из разметки:

...Содержимое вашей страницы...

Мы назначим фоновое изображение элементу body и таким образом добьемся полного покрытия фоном.

Однако эта техника сработает на любом блочном элементе (таком как div или form ). В случае если ширина-высота вашего блочного контейнера подвижна, фоновое изображение будет также менять размер, чтобы занять всю область контейнера.

CSS

Мы объявляем свойства элемента body следующим образом:

body { /* Местоположение фоновой картинки */ background-image: url(images/background-photo.jpg); /* Фоновое изображение выровнено по центру в горизонтальной и вертикальной плоскостях */ background-position: center center; /* Фон не повторяется */ background-repeat: no-repeat; /* Фон зафиксирован в области просмотра и потому не двигается, когда высота контента превышает высоту изображения */ background-attachment: fixed; /* Это свойство заставляет фон менять масштаб при изменении размеров содержащего его контейнера*/ background-size: cover; /* Цвет фона, который будет отображаться при загрузке фоновой картинки*/ background-color: #464646; }

Самое важное свойство-значение в этом списке:

background-size: cover;

Стоит заострить на нем внимание. Здесь и происходит чудо. Эта пара значения-свойства и дает указание браузеру на масштабирование фонового изображения в таких пропорциях, что высота-ширина будет оставаться равной или превышать высоту-ширину самого элемента. (В нашем случае этот элемент — body .)

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

А как вы знаете, когда мы растягиваем изображение сверх его настоящего размера — мы теряем качество изображения (другими словами появляется пикселизация ):

Когда изображение масштабируется в сторону увеличения родного размера — падает качество изображения .

Не забудьте об этом, когда будете подбирать фон. В демо-примере мы используем фото размером 5500 на 3600px для больших экранов, и потому в этом случае вряд ли произойдет нечто подобное.

Для того чтобы наш фон был выровнен по центру, мы объявили следующее:

background-position: center center;

Это установит масштабирующие оси в центр области просмотра.

Мы сделаем вот что. Установим свойство background-attachment в значение fixed , чтобы быть уверенными в том, что изображение останется на своем месте, даже если мы будем скролить страницу вниз:

background-attachment: fixed;

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

Все что вам остается сделать — скачать демо-пример и немного поэкспериментировать со свойствами позиционирования (background-attachment и background-position ) чтобы увидеть, как они влияют на поведение страницы и фона при прокрутке.

Следующие значения свойств говорят сами за себя.

Краткая запись CSS

Выше, для наглядности, я определял CSS — свойства в полном виде.

А так выглядит краткая запись:

body { background: url(background-photo.jpg) center center cover no-repeat fixed; }

Все, что вам остается сделать, это сменить значение url на путь к вашей картинке.

Опционально: медиа-запрос на получение уменьшенной версии фоновой картинки

Для экранов с меньшим разрешением нам понадобится Photoshop для пропорционального уменьшения разрешения картинки до 768 на 505px . Также я пропустил ее через Smush.it для уменьшения размера файла. Это позволило уменьшить размер с 1741 до 114 килобайт. Это уменьшило объем файла на 93%.

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

А вот и сам медиа-запрос:

Ключевая часть медиа-запроса заключена в свойстве max-width: 767px , которое, в нашем случае, означает, что если область просмотра браузера больше чем 767px — используется большое изображение.

Минус этого способа состоит в том, что, если вы изменяете размер окна браузера, с, допустим, 1200px до 640px (или наоборот ), вы увидите мерцающий экран, пока меньшее или большее изображение будет подгружаться.

И вдобавок, из-за того, что некоторые мобильные устройства могут работать в большем разрешении — к примеру, iPhone 5 с Retina -дисплеем разрешением в 1136 на 640px , меньшее изображение будет выглядеть некрасиво.

Заключение

Весь использованный в этом руководстве код вы можете взять с GitHub .

Понравилась статья? Поделитесь ей

Распечатать статью