JS властивість CSSStyleDeclaration.backgroundSize
Загальний опис
backgroundSize — це властивість, яка дозволяє встановлювати або отримувати розмір фону елемента. Вона є надзвичайно корисною при створенні адаптивних вебдизайнів, де важливо контролювати, як зображення фону масштабуються в залежності від розмірів елемента. Основна суть цієї властивості полягає в тому, щоб забезпечити відповідне масштабування фонового зображення, що дозволяє уникнути його спотворення або непропорційного відображення. Застосовується вона переважно в CSS для налаштування вигляду елементів на сторінці.
Для використання властивості backgroundSize, необхідно знати її основні значення та синтаксис. Властивість може приймати кілька різних значень:
auto: Зображення фону зберігає свої природні розміри.length: Вказуються конкретні розміри зображення у вигляді пікселів або інших одиниць виміру (наприклад,100px 50px).percentage: Вказуються розміри у відсотках від розмірів елемента (наприклад,50% 50%).cover: Зображення фону масштабуватиметься таким чином, щоб повністю покривати елемент, зберігаючи пропорції.contain: Зображення фону масштабуватиметься так, щоб повністю поміститися в елемент, зберігаючи пропорції.
Розглянемо приклади використання цієї властивості.
Використання значення auto
let element = document.getElementById('myElement');
element.style.backgroundSize = 'auto';
У цьому випадку зображення фону збереже свої природні розміри, незалежно від розмірів елемента.
Встановлення конкретних розмірів у пікселях
let element = document.getElementById('myElement');
element.style.backgroundSize = '100px 50px';
Цей приклад показує, як встановити конкретні розміри зображення фону. Зображення буде масштабовано до розмірів 100 пікселів у ширину і 50 пікселів у висоту.
Використання відсотків
let element = document.getElementById('myElement');
element.style.backgroundSize = '50% 50%';
Тут зображення фону буде масштабовано до 50% від розмірів елемента по ширині та висоті.
Використання значення cover
let element = document.getElementById('myElement');
element.style.backgroundSize = 'cover';
Цей приклад демонструє, як зображення фону може масштабуватися для повного покриття елемента. Зображення зберігатиме свої пропорції, але може обрізатися, щоб повністю покрити елемент.
Використання значення contain
let element = document.getElementById('myElement');
element.style.backgroundSize = 'contain';
У цьому випадку зображення фону масштабуватиметься так, щоб повністю поміститися в елемент, зберігаючи свої пропорції. Це означає, що зображення не буде обрізатися, але можуть залишитися порожні простори навколо нього.
Використання властивості backgroundSize дозволяє досягти високого рівня контролю над відображенням фонового зображення, що є ключовим у створенні адаптивних та естетично привабливих вебдизайнів. Завдяки можливості задавати різні значення, можна легко налаштувати вигляд елемента під будь-які потреби та вимоги.
| Порада: | Значення властивості |
| Порада: | Для досвідчених програмістів важливо пам'ятати, що властивість |
| Порада: | При роботі з адаптивними макетами, властивість |
Синтаксис
element.style.backgroundSizeЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
3 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі ми створюємо просту вебсторінку, яка демонструє використання властивості element.style.backgroundSize. Користувач може змінювати розмір фонового зображення елемента за допомогою кнопок. Кожна кнопка встановлює різні значення для властивості backgroundSize, такі як auto, cover, contain, 100px 50px та 50% 50%. Це дозволяє користувачеві бачити, як змінюється розмір фонового зображення в реальному часі.
Цей приклад допомагає зрозуміти, як можна динамічно змінювати розмір фонового зображення за допомогою JavaScript, що є корисним для створення адаптивних вебдизайнів.
У цьому прикладі ми встановлюємо розмір фонового зображення елемента з ідентифікатором myElement на cover, що дозволяє зображенню повністю покривати елемент, зберігаючи свої пропорції. Ми також встановлюємо положення зображення по центру за допомогою властивості backgroundPosition, забороняємо повторення зображення через backgroundRepeat і задаємо шлях до зображення за допомогою backgroundImage. Цей підхід забезпечує більш складне та детальне налаштування фону елемента.
// Отримуємо елемент за його ідентифікатором
let element = document.getElementById('myElement');
// Встановлюємо розмір фонового зображення на 'cover' для повного покриття елемента
element.style.backgroundSize = 'cover';
// Встановлюємо положення фонового зображення по центру
element.style.backgroundPosition = 'center';
// Встановлюємо, щоб фонове зображення не повторювалося
element.style.backgroundRepeat = 'no-repeat';
// Встановлюємо зображення фону
element.style.backgroundImage = 'url("path/to/image.jpg")';
У цьому прикладі ми встановлюємо розмір фонового зображення елемента з ідентифікатором myElement на 100 пікселів у ширину і 50 пікселів у висоту. Це дозволяє точно масштабувати зображення фону відповідно до заданих розмірів.
// Отримуємо елемент за його ідентифікатором
let element = document.getElementById('myElement');
// Встановлюємо розмір фонового зображення у 100 пікселів по ширині та 50 пікселів по висоті
element.style.backgroundSize = '100px 50px';