У сьогоднішній статті ми на практиці розглянемо техніку, за допомогою якої зможемо досягти адаптивності для картинок на своєму сайті. Ми розглянемо 2 способи, які дозволять зробити картинки адаптивними з використанням невеликої кількості CSS.
Для початку припустимо, що у нас є така проста HTML розмітка:
<div class="images-box"> <a href="image-URL"> <figure> <img src="image-URL" alt="альтернативний текст картинки"> </figure> </a> <!-- наступні картинки ... --> </div>
На великих екранах наша галерея повинна виглядати приблизно так:
На екранах меншого розміру (менше 50em або 800px) фотогалерея повинна виглядати наступним чином:
Для отримання бажаного результату (адаптивності картинок) ми можемо використовувати різні методи компонування. Перш ніж ми їх розглянемо, уявіть собі, що перед вами стоять наступні завдання:
Спочатку розглянемо метод використання display: inline-block
для побудови нашої фотогалереї. Використовуємо наступний CSS код:
body {width: 80%; margin: 30px auto;} .images-box {font-size: 0;} .images-box a { font-size: 16px; display: inline-block; margin-bottom: 8px; width: calc(50% - 4px); margin-right: 8px; } .images-box a:nth-of-type(2n) {margin-right: 0;} .images-box figure {margin: 0;} .images-box figure img { border: none; max-width: 100%; height: auto; display: block; } @media screen and (min-width: 50em) { .images-box a {width: calc(25% - 6px);} .images-box a:nth-of-type(2n) {margin-right: 8px;} .images-box a:nth-of-type(4n) {margin-right: 0;} }
Ось коротке пояснення цього коду:
За замовчуванням між inline-block
елементами є відступ. Один із способів перевизначити це – встановити розмір шрифту батьківського елементу в нуль. Для цього також може знадобитися скидання розміру шрифту дочірніх елементів (в нашому випадку це не обов’язково).
На маленьких екранах буде макет з двома стовпцями, і ми вказуємо відстань між стовпцями в 8px.
Ширина наших стовпців розраховується наступним чином:
calc(50% - 4px)
. Значення в 4px отримано шляхом обчислення: загальний простір між стовпцями в рядку / кількість стовпців в рядку (8px / 2 => 4px).
На великих екранах ми хочемо макет з 4 стовпцями, і ми вказуємо відступ 8px між стовпцями. Отже, ширина наших стовпців розраховується наступним чином:
calc(25% - 6px)
. Значення в 6px отримано шляхом простого обчислення: загальний простір між стовпцями в рядку / кількість стовпців в рядку (24px / 4 => 6px).
Наведене вище рішення працює досить добре, але є деякі недоліки. Щоб продемонструвати один недолік, давайте припустимо, що кожне зображення також містить текстовий блок з підписом.
Уявімо, що нова розмітка буде мати такий вигляд:
<div class="images-box"> <a href="image-URL"> <figure> <img src="image-URL" alt="альтернативний текст картинки"> <figcaption>Тут якийсь текст, який описує картинку.</figcaption> </figure> </a> <!-- наступні картинки ... --> </div>
Ось так нова версія нашої фотогалереї буде виглядати на великих екранах:
Результат не такий привабливий, тому що елементи сітки мають різну висоту (в залежності від обсягу тексту в підписі). Ми можемо виправити це за допомогою flexbox, сучасного методу компонування, який дозволить нам подолати багато поширених проблем верстки (наприклад, відстань за замовчуванням між inline-block
елементами). Щоб активувати цей метод, нам просто потрібно оновити CSS код для батьківського елемента (flex
контейнер):
.images-box { display: flex; flex-wrap: wrap; }
На щастя, якщо тепер ми попередньо переглянемо фотогалерею, ми отримаємо очікуваний результат (тобто стовпці однакової висоти) на всіх екранах. Ось як це виглядає на великих екранах:
На даний момент, є ще одна річ, яку ми повинні уточнити. Flexbox надає властивість justify-content
, яка вирівнює flex
елементи уздовж головної осі поточного рядка flex
контейнера. Однак зверніть увагу, що ця властивість не визначає значення, яке дозволить нам створити бажаний макет фотогалереї. Наприклад, значення space-between
між ними призводить до макету, в якому останні 2-ва елемента будуть розподілені по ширині рядка.
Якщо ви хочете використовувати такий варіант, тоді CSS для цього методу буде виглядати так:
.images-box { display: flex; flex-wrap: wrap; justify-content: space-between; /* або ж space-around */}
У сьогоднішньому уроці ми розглянули 2 методи впливу на відстань між стовпцями сітки для побудови адаптивної сітки картинок. Хоча метод inline-block
є досить хорошим, flexbox
робить це набагато простіше і зручніше, особливо в поєднанні з функцією calc()
. До речі, тут ви можете почитати про функцію calc() в CSS.
Якщо у вас є інше практичне вирішення цієї проблеми, не соромтеся розповісти про нього в коментарях нижче.
Дякуємо, що читаєте нас!
Консоль браузера (також відома як консоль JavaScript або веб-консоль), — це потужний інструмент для розробників,…
Ніколи не вказуйте на помилки, якщо не знаєте, як їх виправити Джордж Бернард Шоу
Коли необхідно зробити вибір, а ви його не робите, — це теж вибір Вільям Джеймс…
Коли ви ставите перед собою цілі, дуже важливо бути максимально конкретним. Тут не допоможе проста…
Сучасна людина думає, що втрачає час, коли не діє швидко, однак не знає, що робити…
Унікальна елегантність і довговічність: чому варто купити травертин або граніт Натуральний камінь це більше, ніж…