Гумові зображення

Конспект лекції: функція calc(), адаптивні картинки, max-width, object-fit та гумові відео

1. Функція calc()

Функція calc() дозволяє виконувати арифметичні операції з різними одиницями виміру прямо в CSS. Браузер обчислює результат «на льоту».

/* Проблема: дві колонки + відступ = більше 100% */
.sidebar { width: 40%; }
.content {
    width: calc(60% - 20px);
    margin-left: 20px;
}

Підтримувані операції: +, -, *, /. Можна змішувати одиниці: calc(100% - 20px), calc(50vh + 2rem).

Не зловживайте calc()! У більшості випадків можна обійтися Flexbox або

box-sizing:
border-box

. Надмірне використання calc() ускладнює читання коду.

Чому box-sizing: border-box не вирішує проблему?

border-box враховує лише padding і border у ширині елемента. Зовнішній відступ margin не входить у розрахунок, тому 60% + margin-left: 20px все одно перевищить 100%.

2. Центрування абсолютного елемента

Класична задача: помістити елемент точно по центру батьківського блоку.

Спосіб 1: position + transform (універсальний)

.parent {
    position: relative;
}

.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Чому працює:

top: 50%; left: 50% — зміщує лівий верхній кут елемента до центру батька
translate(-50%, -50%) — зміщує елемент назад на половину своїх розмірів

Ключова перевага: відсотки в translate() рахуються від розмірів самого елемента (а не батька). Тому центрування працює незалежно від розмірів елемента.

Спосіб 2: Flexbox

.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

Різниця між підходами:

Спосіб	Де задаються стилі	Коли використовувати
position + transform	На дочірньому елементі	Модальні вікна, поверхневі елементи
Flexbox	На батьківському елементі	Загальне центрування контенту

Чому margin-left: -50px — поганий спосіб?

Жорстко прив'язує зміщення до конкретного розміру елемента. Якщо розмір зміниться — центрування зламається. transform: translate(-50%, -50%) працює з будь-якими розмірами.

3. transform — перетворення елементів

Властивість transform дозволяє застосовувати до елемента різні візуальні перетворення:

Функція	Що робить
`translate(x, y)`	Зміщує елемент по осях X та Y
`rotate(deg)`	Обертає елемент
`scale(n)`	Збільшує/зменшує елемент
`skew(x, y)`	Нахиляє елемент (перетворює прямокутник на паралелограм)

Не плутайте: transform — перетворення (зміщення, обертання тощо). transition — анімований перехід між станами. Це різні властивості, які часто використовуються разом.

4. Контентні та фонові зображення

Тип	Технологія	Коли використовувати
Контентне	`<img>`	Зображення, що змінюється від сторінки до сторінки: фото товару, аватар, обкладинка статті
Фонове	`background-image`	Декоративне зображення, прив'язане до дизайну: фон шапки, абстрактна текстура

Головне питання: чи буде це зображення змінюватися через адмінпанель? Якщо так — це контентне зображення (<img>), навіть якщо візуально воно виглядає як фон (наприклад, обкладинка статті).

5. object-fit і object-position

Властивості object-fit та object-position — це аналоги background-size та background-position, але для тегів <img> та <video>.

img {
    width: 200px;
    height: 200px;
    object-fit: cover;
    object-position: center center;
}

Значення	Поведінка
`cover`	Заповнює блок повністю, зайве обрізає. Пропорції зберігаються
`contain`	Вписує зображення повністю, з'являються «смуги». Пропорції зберігаються
`fill` (за замовчуванням)	Розтягує до заданих розмірів. Пропорції не зберігаються
`none`	Зображення зберігає свій реальний розмір

object-position задає точку, відносно якої масштабується зображення: top center, bottom right тощо. За замовчуванням — center center.

6. Оптимізація завантаження зображень

Порівняння поведінки різних способів приховування для контентних та фонових зображень:

Спосіб приховування	`<img>`	`background-image`	`::before`
`display: none`	Завантажується	Залежить від браузера	Не завантажується
`opacity: 0`	Завантажується	Завантажується	Завантажується
`visibility: hidden`	Завантажується	Завантажується	Завантажується

Висновок: жоден спосіб приховування CSS не запобігає завантаженню <img>. Для оптимізації потрібен інший підхід — lazy loading.

7. Lazy loading — відкладене завантаження

Ідея: не завантажувати зображення, поки користувач не прокрутив до нього сторінку.

Підхід з data-атрибутами

<!-- Зображення не завантажиться — src порожній -->
<img src=""
     data-src="photo.jpg"
     alt="Опис"
     class="lazy">

Як працює:

Атрибут src порожній або містить зображення-заглушку низької якості
Реальна адреса зберігається в data-src (data-атрибут не впливає на завантаження)
JavaScript відстежує прокрутку і, коли зображення потрапляє у видиму область, копіює data-src → src
Тільки після цього браузер починає завантаження

Нативний lazy loading

<img src="photo.jpg"
     loading="lazy"
     alt="Опис">

Сучасний спосіб: атрибут loading="lazy" підтримується всіма сучасними браузерами і не потребує JavaScript. Браузер сам відкладає завантаження зображень, що знаходяться поза видимою областю.

8. Гумові зображення — max-width: 100%

Основна техніка для гумових контентних зображень:

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

Властивість	Поведінка
`width: 100%`	Зображення завжди розтягується на всю ширину батька (навіть якщо менше)
`max-width: 100%`	Зображення не перевищує ширину батька, але не збільшується понад свій реальний розмір

Стандартний підхід: задаємо max-width: 100% для зображення, а розміри контролюємо через батьківський блок. Це дає універсальний клас, який можна застосувати до будь-якої картинки.

При width: 100% маленьке зображення розтягнеться і втратить якість. При max-width: 100% воно збереже свій реальний розмір, якщо батько більший.

9. background-size для фонових зображень

Властивість background-size керує розміром фонового зображення:

Значення	Поведінка
`cover`	Заповнює весь блок, зайве обрізає
`contain`	Вписує повністю, з'являються смуги
Значення в px або %	Фіксований розмір (наприклад, `600px auto` — ширина 600px, висота автоматична)
`100%`	Ширина = ширині блоку, висота автоматична

У комбінації з background-position: center отримуємо зображення, що коректно масштабується при зміні розмірів блоку.

10. Підсумкова таблиця

Тема	Ключове
`calc()`	Арифметика в CSS зі змішуванням одиниць; не зловживайте
Центрування absolute	`top: 50%; left: 50%; transform: translate(-50%, -50%)` — універсальний спосіб
`object-fit`	Аналог `background-size` для `<img>` та `<video>`
Контентне vs фонове	Якщо змінюється через адмінку → контентне (`<img>`)
Гумове `<img>`	`max-width: 100%; height: auto;` — стандартний підхід
Lazy loading	Нативний: `loading="lazy"`; з JS: `data-src` → `src`
`transform`	Зміщення, обертання, масштабування; `translate(%)` рахується від самого елемента