style.objectFit в JavaScript — вписати картинку в блок

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

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

Переглядачі

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

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

Переглядач
	32	36	10	19	79	—

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

Переглядач
	4.4.3	32	36	10

Приклади

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

<header>
  <h2 class="title">objectFit</h2>
  <p class="description">Цей метод визначає, як вміст елемента змінює розмір та розташовується всередині контейнера.</p>
</header>
<main>
  <div class="result">
    <div class="image-container">
      <img id="demo-image" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Example Image">
    </div>
    <div class="controls">
      <button onclick="setObjectFit('fill')">Fill</button>
      <button onclick="setObjectFit('contain')">Contain</button>
      <button onclick="setObjectFit('cover')">Cover</button>
      <button onclick="setObjectFit('scale-down')">Scale Down</button>
      <button onclick="setObjectFit('none')">None</button>
    </div>
  </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);
}

.image-container {
  width: 300px;
  height: 200px;
  border: 1px solid #ccc;
  overflow: hidden;
  margin-bottom: 15px;
}

.image-container img {
  width: 100%;
  height: 100%;
}

.controls button {
  margin: 5px;
  padding: 10px;
  border: none;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.controls button:hover {
  background-color: #0056b3;
}

function setObjectFit(fitType) {
  const image = document.getElementById('demo-image');
  image.style.objectFit = fitType;
}
//# sourceURL=pen.js

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">
        Ваш браузер не відтворює відео.
    </video>
</div>

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

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