Підступна війна росії проти України. Орієнтовні втрати ворога
(станом на 02.12.2022)
90090
осіб
280
літаків
262
гелікоптерів
2916
танків
5883
ББМ
1905
артилерія
210
ППО
395
РСЗВ
4464
машин
16
кораблі і катери
Як домогтися адаптивності картинок з допомогою CSS

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

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

 

 

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

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

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

 

 

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

Адаптивність картинок в CSS

 

 

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

Адаптивність картинок в CSS

 

 

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

  • На середніх екранах і маленьких (менше 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>

 

 

Ось так нова версія нашої фотогалереї буде виглядати на великих екранах:

Адаптивність картинок в CSS

 

 

Результат не такий привабливий, тому що елементи сітки мають різну висоту (в залежності від обсягу тексту в підписі). Ми можемо виправити це за допомогою flexbox, сучасного методу компонування, який дозволить нам подолати багато поширених проблем верстки (наприклад, відстань за замовчуванням між inline-block елементами). Щоб активувати цей метод, нам просто потрібно оновити CSS код для батьківського елемента (flex контейнер):

.images-box {
  display: flex;
  flex-wrap: wrap;
}

 

 

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

Адаптивність картинок в CSS

 

 

На даний момент, є ще одна річ, яку ми повинні уточнити. 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.

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

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

 

 

Напишіть тут свою думку/питання

Ваша пошта не публікуватиметься.