Як домогтися адаптивності картинок з допомогою CSS

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

 

 

Побудова адаптивного макета картинок

Для початку припустимо, що у нас є така проста HTML розмітка:

<div class="images-box">
 <a href="image-URL">
  <figure>
   <img src="image-URL" alt="альтернативний текст картинки">
  </figure>
 </a>
 <!-- наступні картинки ... -->
</div>

 

 

На великих екранах наша галерея повинна виглядати приблизно так:

 

 

На екранах меншого розміру (менше 50em або 800px) фотогалерея повинна виглядати наступним чином:

 

 

Для отримання бажаного результату (адаптивності картинок) ми можемо використовувати різні методи компонування. Перш ніж ми їх розглянемо, уявіть собі, що перед вами стоять наступні завдання:

  • На середніх екранах і маленьких (менше 50em або 800px) вам необхідно отримати макет з 2 колонками картинок, і на великих екранах (50em, 800px або вище) макет з 4 колонками картинок.
  • Відстань між стовпчиками повинна бути 8 пікселів.

 

 

 

Спосіб №1: Використання inline-block

Спочатку розглянемо метод використання 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.

Ширина наших стовпців розраховується наступним чином:

  • Спільний відступ між стовпцями в рядку = 1 * 8px => 8px. Похідне значення становить 8px, а не 16px, оскільки ми видаляємо правий відступ для кожного другого стовпчика на маленьких екранах.
  • Ширина кожного стовпчика = calc(50% - 4px). Значення в 4px отримано шляхом обчислення: загальний простір між стовпцями в рядку / кількість стовпців в рядку (8px / 2 => 4px).

 

На великих екранах ми хочемо макет з 4 стовпцями, і ми вказуємо відступ 8px між стовпцями. Отже, ширина наших стовпців розраховується наступним чином:

  • Спільний простір між стовпцями в рядку = 3 * 8px => 24px. Знову ж таки, похідне значення становить 24px, а не 32px, тому що ми видаляємо правий відступ для кожного четвертого стовпчика.
  • Для ширини стовпця ми використовуємо calc(25% - 6px). Значення в 6px отримано шляхом простого обчислення: загальний простір між стовпцями в рядку / кількість стовпців в рядку (24px / 4 => 6px).

 

 

 

Спосіб №2: Використання Flexbox

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

 

Уявімо, що нова розмітка буде мати такий вигляд:

<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.

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

Дякуємо, що читаєте нас!

 

Share

Останні пости

Сомерсет Моем

Подорослішавши, ви збагнете, що світ стає стерпним за однієї умови: коли розумієш, що людський егоїзм… Читати далі

27/03/2024

Михайло Грушевський

Всі вчаться своєї рідної мови, а наша біда така, що треба вчитися її більше, ніж… Читати далі

26/03/2024

ТОП-5 покерних обмінників

Професійний покер – це численні турніри та великі гроші, що потребує правильного налаштування фінансових інструментів.… Читати далі

25/03/2024

Гай Юлій Цезар

Всі довкола прагнуть винищити ворогів, а не об'єднатися з друзями Гай Юлій Цезар   Читати далі

24/03/2024

Як вибрати оптимальний смартфон для дитини?

Сьогоднішні діти стикаються з технологіями вже в ранньому віці, і смартфон давно перестав бути просто… Читати далі

22/03/2024

Вибираємо електроскутер: важливі критерії та характеристики

Років 20 тому спостерігався пік популярності скутерів із двигуном внутрішнього згоряння (ДВЗ). Маленькі, юркі, з… Читати далі

21/03/2024