Всем привет! Мы разобрались с тем, что такое адаптивная верстка, сетка и как сделать адаптивными шрифты. Теперь же давайте разберем, как адаптировать изображения .

На самом деле это очень простая тема, и она не займет у нас много времени.

Чтобы ваши изображения стали гибкими, нужно просто добавить им свойство max-width=100% .

Img {
max-width: 100%;
}

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

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

Img, embed, object, video {
max-width: 100%;
}

Все бы хорошо, но это работает только в IE7+ Если же вам нужно поддерживать IE6 , то там это свойство работает в такой записи:

Img {
width: 100%;
}

Т.е. вместо max-width пропишите width .

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

Решить эту проблему для IE просто.

Logo {
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/path/to/logo.png",sizingMethod="scale");
}

Т.е. эту проблему нам помогает исправить свойство filter .

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

Как сделать изображение адаптивным с помощью CSS? Для начала вам понадобится убрать атрибуты ширины и высоты в теге изображения (если таковые имеются). Ваш HTML-код не должен их содержать:

В таблицу стилей добавьте следующую запись:

Img { max-width: 100%; }

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

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

Img { max-width: 50%; }

Чтобы сделать адаптивными теги , а также и , добавьте для них такой же CSS-код, как и для изображений. Желательно перечислить сразу все селекторы:

Img, video, embed, object { max-width: 100%; }

Дела обстоят сложнее, если вы встраиваете видео через тег . Тогда вышеописанный метод здесь не работает. Придется прибегнуть либо к помощи JavaScript, либо использовать более хитрый CSS-код.

Если вы выбрали второй вариант, вам понадобится поместить тег в дополнительный контейнер . Например:

Затем добавьте следующий код CSS:

Video { height: 0; position: relative; padding-bottom: 56.25%; } .video iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }

Как вы заметили, в коде присутствует свойство padding-bottom со странным значением 56.25% . Что это означает? Значение padding-bottom , указанное в процентах, считается относительно ширины блока. Число 56.25 мы получили, определив соотношение сторон встраиваемого видео (16:9) и разделив число короткой стороны на число длинной стороны, после чего умножив результат на 100.

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

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

Данный трюк заключается в установке значения в процентах отступам (padding ) элемента. Впервые способ опубликован в старой статье блога A List Apart , однако он до сих пор хорошо работает.

Предположим, что есть фоновое изображение 800 на 450 пикселей, и нужно сделать его фоном с фиксированным соотношением сторон - 16:9. В коде ниже для отступов используется px , но все будет работать и с em . Также есть HTML5 элемент figure, для его корректной работы в старых браузерах можно использовать HTML5 shiv .

Div.column { max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ }

Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fixedratio { padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http://voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }

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

Например картинка шириной 800 на 200 пикселей (4:1) на маленьком экране, при ширине в 300 пикселей, должна уменьшаться до 150 пикселей (2:1). Посчитаем атрибуты height и padding-top :

На рисунке показано соотношение сторон фонового изображения при разной ширине. Наклон графика (slope) соответствует атрибуту padding-top , начальная высота (start height) - атрибуту height . В итоге получается код:

Div.column { /* The background image must be 800px wide */ max-width: 800px; } figure.fluidratio { padding-top: 10%; /* slope */ height: 120px; /* start height */ background-image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ }

/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) { $width-large: nth($large-size, 1); $width-small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height-large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ } figure.fluidratio { /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); }

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

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

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

Простой пример: предположим, вы хотите, чтобы ваш логотип размером 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. Это бесплатный сервис, позволяющий решить большинство проблем современного веб дизайнера.

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

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

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

Итак, около года назад я считал, что для того, чтобы сделать картинку адаптивной (то есть сделать так, чтобы она растягивалась или сжималась по ширине контейнера), достаточно воспользоваться следующим кодом:

Wrapper img{ width: 100%; }

И действительно, в некоторых случая этим можно ограничиться. Этот трюк отлично работает, когда окно браузера становится меньше. Но что, если ширина контейнера, в котором лежит картинка, становится больше разрешения картинки? Правильно. Картинка растягивается по ширине контейнера, но качество оставляет желать лучшего. А что делать, если нужна поддержка разрешения 2048 x1536px ?

Если вы не используете svg и это растровое изображение, то первое, что приходит на ум, – это взять картинку, которая подходила бы к максимальному разрешению landing page, а уже с изменением размера окна браузера, она будет сжиматься с нормальным качеством.

И тогда возникает проблема производительности. Глупо для смартфона подгружать такие большие картинки, которые хорошо смотрятся на retina разрешении. Ведь скорость мобильных сетей не такая высокая, как у ПК, и некоторые пользователи могут не дождаться загрузки лендинга на своем смартфоне. А в результате – это потерянный клиент.

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

Вроде бы проблема решена. Но дело в том, что браузеры, для того, чтобы ускорить отображение страницы предзагружают картинки, которые прописаны в html до того, как начнет обрабатываться css. Может я не совсем правильно выразился (поправьте), но если провернуть такой трюк, то все картинки все равно будут загружены, вне зависимости от того, что прописано в css. А значит мы только усугубили положение для мобильных устройств. Теперь им придется грузить не одно, а несколько изображений.

В этом можно убедиться, открыв инструменты разработчика и заглянув во вкладку “Сеть”.

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

В html 5 появился тег picture, который позволяет решить большинство проблем и создан именно для создания адаптивного (отзывчивого) дизайна. Его конструкция напоминает теги video и audio. Суть работы заключается в том, что внутри тега picture задаются несколько изображений под конкретные разрешения экрана. Выглядит это примерно так:

Особенность в том, что вместо src – используется srcset и применяется что-то похожее на медиазапросы. Маленькая картинка грузится при разрешении меньше 319px. Среднее изображение при разрешении от 320px до 480px и т.д.

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

Как видите ситуация на данный момент оставляет желать лучшего. Нет поддержки на IOS устройствах, на Macbook(ах) и на IE (Хотя, пользователей IE – не жалко, они должны страдать). Думаю, что все мы не готовы терять такое количество пользователей. Нет, неправильно выразился. Не терять, ведь наша основная картинка загрузится и корректно отобразится. Но все равно, хотелось бы не терять клиентов с техникой apple из-за долгой загрузки страницы, так как это, скорее всего, платежеспособная аудитория

Для того, чтобы использовать преимущества этого тега уже сейчас, нужно воспользоваться небольшим скриптом (между тегами head) picturefill.js .

Теперь все устройства должны поддерживать такую структуру верстки адаптивных картинок. Правда на Маке я не тестировал (не обзавелся пока).

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