JS властивість CSSStyleDeclaration.objectFit

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

element.style.objectFit – це властивість CSS, яку можна використовувати через JavaScript для контролю розташування і масштабування елементів, зокрема зображень та відео, в межах контейнера.

Властивість objectFit визначає, як вміст елемента (наприклад, зображення або відео) повинен масштабуватися та позиціонуватися всередині свого контейнера. Значення, що можуть бути присвоєні objectFit, включають: fill, contain, cover, none і scale-down.

fill: Масштабує зображення або відео так, щоб воно заповнило весь контейнер, не зберігаючи при цьому співвідношення сторін.
```
 let image = document.getElementById('myImage');
 image.style.objectFit = 'fill';
```
contain: Масштабує зображення або відео так, щоб воно було повністю видиме в контейнері, зберігаючи співвідношення сторін. Може залишати порожні зони всередині контейнера.
```
 let image = document.getElementById('myImage');
 image.style.objectFit = 'contain';
```
cover: Масштабує зображення або відео так, щоб контейнер був повністю заповнений, зберігаючи співвідношення сторін. Частина зображення може бути обрізана, щоб відповідати розмірам контейнера.
```
 let image = document.getElementById('myImage');
 image.style.objectFit = 'cover';
```
none: Відображає зображення або відео за його оригінальними розмірами без масштабування.
```
 let image = document.getElementById('myImage');
 image.style.objectFit = 'none';
```
scale-down: Порівнює результат значень none та contain і вибирає найменше значення для відображення зображення або відео.
```
 let image = document.getElementById('myImage');
 image.style.objectFit = 'scale-down';
```

Використання властивості objectFit дозволяє контролювати, як медіа-файли розташовуються в контейнерах, що є особливо корисним при розробці адаптивних інтерфейсів користувача. Наприклад, якщо ви хочете забезпечити, щоб зображення завжди заповнювали простір контейнера, незалежно від його розмірів, ви можете використовувати cover. Якщо ж важливо, щоб все зображення було видиме, навіть якщо це означає, що залишаться порожні зони, тоді краще використовувати contain.

У коді JavaScript ви можете легко змінювати значення цієї властивості динамічно, наприклад, у відповідь на взаємодію користувача або зміну розмірів вікна. Це забезпечує гнучкість і контроль над візуальним відображенням медіа-контенту на веб-сторінці.

Загалом, element.style.objectFit є потужним інструментом для розробників, які прагнуть забезпечити оптимальне відображення зображень і відео в різних умовах і на різних пристроях.

Порада:

Якщо ви працюєте з адаптивними зображеннями у каруселях, використовуйте scale-down, щоб гарантувати, що зображення не перевищують розмір контейнера і зберігають свої пропорції. Це особливо корисно для мобільних інтерфейсів, де розміри екранів можуть бути дуже різноманітними.

let carouselImages = document.querySelectorAll('.carousel-image');
carouselImages.forEach(image => image.style.objectFit = 'scale-down');

Порада:

Коли важливо, щоб важливі частини зображення завжди були видимими, застосовуйте objectFit: 'none' та комбінуйте з objectPosition, щоб точно налаштувати видиму область. Наприклад, ви можете показати верхній лівий кут зображення, що може бути корисно для логотипів або інших елементів з фіксованими пропорціями.

let logo = document.getElementById('logo');
logo.style.objectFit = 'none';
logo.style.objectPosition = 'top left';

Синтаксис

element.style.objectFit

Значення

Return

Переглядачі

Переглядач
	1	1	3	8	12

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

Переглядач
	-	-

Приклади

Цей приклад дозволяє користувачам змінювати властивість objectFit для зображення, натискаючи кнопки. Це допомагає наочно зрозуміти, як різні значення цієї властивості впливають на відображення зображення в контейнері.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/RwzWVLd">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

Цей приклад показує, як використати objectFit для зображень у галереї, щоб вони заповнювали весь контейнер, зберігаючи пропорції. Це корисно для створення естетично привабливої галереї, де всі зображення однакового розміру без викривлень.

const images = document.querySelectorAll('.gallery img');
images.forEach(image => {
  image.style.objectFit = 'cover';
});

У цьому прикладі objectFit використовується для відео, яке знаходиться в контейнері, щоб воно повністю поміщалось у межі контейнера, не обрізаючи жодної частини. Це зручно для забезпечення повного перегляду відео, незалежно від розмірів його контейнера.

const video = document.querySelector('.video-container video');
video.style.objectFit = 'contain';

JS довідник

JavaScript

Наповнення JS розділу