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

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

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

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

1. fill: Масштабує зображення або відео так, щоб воно заповнило весь контейнер, не зберігаючи при цьому співвідношення сторін.

    let image = document.getElementById('myImage');
    image.style.objectFit = 'fill';
   

2. contain: Масштабує зображення або відео так, щоб воно було повністю видиме в контейнері, зберігаючи співвідношення сторін. Може залишати порожні зони всередині контейнера.

    let image = document.getElementById('myImage');
    image.style.objectFit = 'contain';
   

3. cover: Масштабує зображення або відео так, щоб контейнер був повністю заповнений, зберігаючи співвідношення сторін. Частина зображення може бути обрізана, щоб відповідати розмірам контейнера.

    let image = document.getElementById('myImage');
    image.style.objectFit = 'cover';
   

4. none: Відображає зображення або відео за його оригінальними розмірами без масштабування.

    let image = document.getElementById('myImage');
    image.style.objectFit = 'none';
   

5. 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');

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

Порада

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

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

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

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

Синтаксис

element.style.objectFit

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

<div class="video-container">
    <video width="300" height="150" controls poster="/img/logo.svg">
        <source src="film.mp4" type="video/mp4">
    </video>
</div>

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

// contain: увесь кадр видно, зайве доповнюється полями
video.style.objectFit = 'contain';