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

Насправді це дуже проста темаі вона не займе у нас багато часу.

Щоб ваші зображення стали гнучкими, потрібно додати їм властивість 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 повинен бути 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; 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; /* background-position: center; 7/8 */ )

/* Calculate fluid ratio заснований на двох dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1); large - $height-small) / ($width-large - $width-small); ;background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; from 4:1 at 800px to 2:1 at 300px.

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

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

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

Простий приклад: припустимо, ви хочете, щоб ваш логотип розміром 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 .

Тепер усі пристрої повинні підтримувати таку структуру верстки адаптивних картинок. Щоправда на Маку я не тестував (не обзавівся поки що).

На відміну від способу, описаного вище, зараз вантажиться лише одна картинка, а не три, як це було раніше.