Як домогтися адаптивності картинок з допомогою 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.

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

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

 

Recent Posts

Преміум та безкоштовні WordPress шаблони: що варто обрати саме вам?

Коли мова заходить про вибір ідеальної платформи для побудови сайту, багато людей, перш за все,… Read More

02/06/2021

Ошо

Вже пізно повертати назад, щоб все правильно почати, але ще не пізно рушити вперед, щоб… Read More

23/05/2021

Шпаргалка по часовим формам дієслова в англійській мові

В англійській мові дуже складна система часів (часові форми дієслова – Verb Tenses), яка відноситься… Read More

17/05/2021

Теорія кольору – поради для натхнення веб-дизайнерам

Ви коли-небудь замислювалися про те, як веб-дизайнери підбирають ідеальне поєднання кольорів? Цікавилися тим, які кольори… Read More

30/04/2021

Як стати фрілансером – дієві поради

Фріланс – це можливість спокійно і розмірено працювати вдома, не звертаючи увагу на навколишній простір,… Read More

27/04/2021

Найкрасивіші каньйони з усього світу (частина 1/2)

Протягом багатьох сотень тисяч, або навіть мільйонів років, швидка течія річок підточувала і вимивала скельні… Read More

27/04/2021