object-fit

Властивість CSS object-fit задає те, як вміст заміщеного елемента, як то <img> чи <video>, повинен адаптуватися для вміщення у своєму контейнері.

Шикування об'єкта вмісту заміщеного елемента всередині рамок елемента можна змінити за допомогою властивості object-position.

Спробуйте його в дії

Синтаксис

object-fit: contain;
object-fit: cover;
object-fit: fill;
object-fit: none;
object-fit: scale-down;

/* Глобальні значення */
object-fit: inherit;
object-fit: initial;
object-fit: revert;
object-fit: revert-layer;
object-fit: unset;

Властивість object-fit задається одним ключовим словом, обраним зі списку значень нижче.

Значення

contain (вмістити)

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

cover (накриття)

Заміщений вміст калібрується для збереження своїх пропорцій при заповненні всіх рамок вмісту елемента. Якщо пропорції об'єкта не відповідають пропорціям рамок, то об'єкт обрізається, щоб уміститись.

fill (заповнення)

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

none (жодного)

Заміщений вміст не змінює розміру.

scale-down (скоротити)

Вміст калібрується так, ніби задано none чи contain, а результатом стає той із варіантів, що дає менший конкретний розмір об'єкта.

Формальне визначення

Формальний синтаксис

fill | contain | cover | none | scale-down

Приклади

Задання object-fit зображенню

HTML

<section>
  <h2>object-fit: fill</h2>
  <img class="fill" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <img class="fill narrow" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <h2>object-fit: contain</h2>
  <img class="contain" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <img class="contain narrow" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <h2>object-fit: cover</h2>
  <img class="cover" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <img class="cover narrow" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <h2>object-fit: none</h2>
  <img class="none" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <img class="none narrow" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <h2>object-fit: scale-down</h2>
  <img class="scale-down" src="mdn_logo_only_color.png" alt="Логотип MDN" />

  <img
    class="scale-down narrow"
    src="mdn_logo_only_color.png"
    alt="Логотип MDN" />
</section>

CSS

h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  margin: 10px 0;
}

.narrow {
  width: 100px;
  height: 150px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}

Результат

Специфікації

Сумісність із браузерами

desktop mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on iOS Samsung Internet
object-fit
Chrome Full support 32
Edge Full support 79
Firefox Full support 36
Internet Explorer No support No
Opera Full support 19
Safari Full support 10
WebView Android Full support 4.4.3
Chrome Android Full support 32
Firefox for Android Full support 36
Opera Android Full support 19
Safari on iOS Full support 10
Samsung Internet Full support 2.0

Дивіться також