style.backgroundSize — розмір фонового зображення в JS

Загальний опис

backgroundSize — це властивість, яка дозволяє встановлювати або отримувати розмір фону елемента. Вона є надзвичайно корисною при створенні адаптивних вебдизайнів, де важливо контролювати, як зображення фону масштабуються в залежності від розмірів елемента. Основна суть цієї властивості полягає в тому, щоб забезпечити відповідне масштабування фонового зображення, що дозволяє уникнути його спотворення або непропорційного відображення. Застосовується вона переважно в CSS для налаштування вигляду елементів на сторінці.

Для використання властивості backgroundSize, необхідно знати її основні значення та синтаксис. Властивість може приймати кілька різних значень:

1. auto: Зображення фону зберігає свої природні розміри.
2. length: Вказуються конкретні розміри зображення у вигляді пікселів або інших одиниць виміру (наприклад, 100px 50px).
3. percentage: Вказуються розміри у відсотках від розмірів елемента (наприклад, 50% 50%).
4. cover: Зображення фону масштабуватиметься таким чином, щоб повністю покривати елемент, зберігаючи пропорції.
5. 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 дозволяє досягти високого рівня контролю над відображенням фонового зображення, що є ключовим у створенні адаптивних та естетично привабливих вебдизайнів. Завдяки можливості задавати різні значення, можна легко налаштувати вигляд елемента під будь-які потреби та вимоги.

правити

Порада

Значення властивості backgroundSize можна задавати у різних одиницях виміру, таких як пікселі (px), відсотки (%) або ключові слова (contain, cover, auto). Це дозволяє гнучко керувати масштабуванням фонового зображення. Наприклад, element.style.backgroundSize = "50% 50%" встановить розмір фонового зображення на 50% ширини та 50% висоти елемента.

автор: Bond правити

Порада

Для досвідчених програмістів важливо пам'ятати, що властивість backgroundSize є частиною об'єкта element.style, який містить інші властивості стилів для даного елемента. Тому її можна використовувати разом з іншими властивостями стилів для досягнення бажаного ефекту. Наприклад:

const myElement = document.getElementById("myElement");
myElement.style.backgroundImage = "url('image.jpg')";
myElement.style.backgroundSize = "cover";
myElement.style.backgroundRepeat = "no-repeat";
myElement.style.backgroundPosition = "center";

автор: Bond правити

Порада

При роботі з адаптивними макетами, властивість backgroundSize часто використовується разом з медіа-запитами або JavaScript для динамічної зміни розміру фонового зображення залежно від розміру вікна чи пристрою. Це дозволяє забезпечити оптимальний досвід користувача на різних пристроях. Наприклад:

const updateBackgroundSize = () => {
  const screenWidth = window.innerWidth;
  if (screenWidth < 768) {
    myElement.style.backgroundSize = "contain";
  } else {
    myElement.style.backgroundSize = "cover";
  }
}

window.addEventListener("resize", updateBackgroundSize);

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.backgroundSize

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	3	4	5	10	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	4.2

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент за його ідентифікатором
let element = document.getElementById('myElement');

// Встановлюємо розмір фонового зображення у 100 пікселів по ширині та 50 пікселів по висоті
element.style.backgroundSize = '100px 50px';

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо елемент за його ідентифікатором
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")';

<header>
  <h2 class="title">element.style.backgroundSize</h2>
  <p class="description">Встановлює або отримує розмір фону елемента.</p>
</header>
<main>
  <div class="result">
    <div id="backgroundElement" class="background-element">
      <p>Фонове зображення</p>
    </div>
    <button onclick="setBackgroundSize('auto')">Auto</button>
    <button onclick="setBackgroundSize('cover')">Cover</button>
    <button onclick="setBackgroundSize('contain')">Contain</button>
    <button onclick="setBackgroundSize('100px 50px')">100px 50px</button>
    <button onclick="setBackgroundSize('50% 50%')">50% 50%</button>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

.background-element {
  width: 300px;
  height: 200px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='200'%20viewBox='0%200%20160%20120'%3E%3Crect%20width='160'%20height='120'%20fill='%23a8dadc'/%3E%3Crect%20y='72'%20width='160'%20height='48'%20fill='%23457b9d'/%3E%3Ccircle%20cx='126'%20cy='26'%20r='14'%20fill='%23f4a261'/%3E%3Cpath%20d='M0%2072%2044%2026%2078%2062%2098%2044%20160%2072Z'%20fill='%232a9d8f'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  margin-bottom: 15px;
}

button {
  margin: 5px;
  padding: 10px;
  font-size: 14px;
  cursor: pointer;
}

function setBackgroundSize(size) {
  const element = document.getElementById('backgroundElement');
  element.style.backgroundSize = size;
}
//# sourceURL=pen.js