Адаптивні зображення з допомогою CSS

48

У цьому невеликому уроці ми розглянемо найпростіші способи створення адаптивних зображень за допомогою CSS.
Існує не мало різних рішень зробити зображення адаптивними, всі вони різняться за складністю, та ступеня підтримки браузерами. Прикладом складного шляху реалізації адаптивних картинок, є використання атрибуту srcset, для якого потрібно декілька зображень, більше розмітки, а також залежність від підтримки браузерами.

Адаптивные изображения с помощью CSS

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

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

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

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

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

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

HTML:

CSS:

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

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

Зверніть увагу, що елемент буде адаптивним, навіть якщо були задані фіксовані значення HTML-атрибути ширини та висоти безпосередньо в розмітці.

Демо

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

Іноді ми хочемо бачити зображення вишикувані в ряд пліч-о-пліч, або наприклад, у вигляді сітки, для організації найпростішої галереї картинок.
Для цього необхідні лише внести невеликі зміни в код, який використовували вище, перше, це зменшити ширину властивість width і задати елементу значення inline-block властивості display, тобто зробити його вбудованим.
Давайте розглянемо дві компонувальні схеми розташування картинок в дві колонки і макет з трьох стовпців.

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

HTML:


CSS:

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

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

2. Три колонки зображень

З трьох-колоночным макетом концепція та ж, необхідно розподілити ширину базового контейнера на три картинки, для цього достатньо встановити значення ширини зображень близько однієї третини ширини контейнера: 32%.

HTML:



CSS:

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

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

Демо

Умовна розстановка адаптивних зображень

У наступному прикладі ми розглянемо варіант використання адаптивних картинок з різним розташуванням в залежності від пристроїв перегляду, тобто при перегляді на смартфонах зображення будуть відображатися в одну колонку, у дві колонки на планшетах, і шикуватися в чотири колонки на великих екранах.
Для реалізації задуманого, застосуємо медіа-запити @media, вказавши тип носія, для якого буде застосовуватися те чи інше максимальне значення ширини зображень max-width.

HTML:




CSS:

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

/* Для невеликих пристроїв (смартфони) */
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%.

CSS:

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

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

Незважаючи на те що ця техніка дуже проста у використанні і має стійку підтримку браузерми, слід пам’ятати про те, що зображення завжди будуть показані в повний розмір, тобто великі, з високою роздільною здатністю зображення показуються заповнюючи весь простір, що для невеликих мобільних пристроїв, не завжди в тему, якщо тільки картинка не використовується в якості фонового зображення.

На цьому мабуть і все. Якщо ви хочете, для різних пристроїв, використовувати окремі зображення різного розміру, використовуйте, гірше точно не буде. Знаєте інші методи зробити зображення адаптивними, пишіть в коментарях, обов’язково розглянемо, нове воно завжди цікаво.

ДемоИсходники

Джерело: sixrevisions
Сподіваюся буржуінскій автор не буде на мене ображається за настільки вільний переклад)))

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: