Що таке background-size: cover?

background-size: cover - це CSS властивість, яка масштабує фонове зображення так, щоб воно повністю покривало контейнер, зберігаючи при цьому свої пропорції.

Коли ви використовуєте background-size: cover, зображення буде масштабоване до найменшого розміру, при якому воно покриє всю область контейнера по обох осях (ширині та висоті).

Ключові характеристики:

? Зберігає пропорції зображення
? Заповнює весь контейнер
? Може обрізати частину зображення
? Гарантує, що не буде пустих областей

Як працює cover?

4:3

Зображення

>

16:9

Обрізане зображення

Зображення з пропорціями 4:3 масштабується так, щоб покрити контейнер з пропорціями 16:9. В результаті частина зображення обрізається з боків.

                    .container {

                      background-image: url('image/83-400x300.jpg');

                      background-size: cover;

                      background-position: center;

                    }

Порівняння з іншими значеннями

background-size: cover

Заповнює весь контейнер, може обрізати зображення

background-size: contain

Вміщує все зображення, може залишати пусті області

background-size: 100% 100%

Розтягує зображення, спотворюючи пропорції

background-size: auto

Відображає зображення в оригінальному розмірі

Коли використовувати cover?

Hero секції

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

Фони сторінок

Для створення повноекранних фонів, які адаптуються до будь-якого розміру екрану.

Картки товарів

Коли потрібно показати товар повністю без спотворення пропорцій.

Галереї зображень

Для створення однорідного вигляду в галереї з різними пропорціями зображень.

Інтерактивна демонстрація

Спробуйте різні розміри контейнера та спостерігайте, як cover адаптує зображення:

Поточний розмір: 800?600

Практичний приклад

                    /* Hero секція з cover */

                    .hero {

                      background-image: url('hero-bg.jpg');

                      background-size: cover;

                      background-position: center center;

                      height: 100vh;

                      display: flex;

                      align-items: center;

                      justify-content: center;

                      color: white;

                      text-align: center;

                    }

                    /* Додатковий шар для покращення читабельності */

                    .hero::before {

                      content: '';

                      position: absolute;

                      top: 0;

                      left: 0;

                      right: 0;

                      bottom: 0;

                      background: rgba(0, 0, 0, 0.5);

                      z-index: 1;

                    }

Підсумок

Переваги cover:

? Гарантоване покриття всієї області
? Збереження пропорцій зображення
? Ідеально для адаптивного дизайну
? Просте у використанні

Недоліки:

? Може обрізати важливі частини зображення
? Потрібно обережно вибирати background-position
? Не підходить для зображень, які повинні бути повністю видимі

Висновок: Використовуйте background-size: cover, коли вам потрібно заповнити контейнер зображенням без порожніх областей і спотворення пропорцій, і ви готові до того, що частина зображення може бути обрізана.