Властивості object-fit і object-position

Бувають ситуації, коли контентне зображення більше або менше за контейнер, в який його необхідно помістити, або зображення має інші пропорції. Наприклад, часте завдання у картках товару - це «тумба» фіксованої висоти, в яку необхідно гарно вмістити фотографію товару довільного розміру, тобто підігнати зображення під розмір контейнера.

Властивість object-fit

Визначає, яким чином вміст <img> (або <video>) буде вміщуватися в контейнер, якщо їх розміри або пропорції не збігаються. Властивість object-fit обрізає, розтягує або масштабує контентне зображення. Це схоже на background-size, але для контентних зображень.

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

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

Для того щоб ця техніка працювала, необхідні два обов'язкових кроки.

<div class="thumb">
  <img src="" alt="" />
</div>

Перший - у контейнера (тумби) повинна бути явно вказана фіксована висота. Ширина може бути по ширині батька як у прикладі.

.thumb {
  height: 400px;
  width: 300px;
}

Другий - зображення необхідно «вмістити» в контейнер, задавши висоту і ширину 100%.

.thumb > img {
  display: block;
  height: 100%;
  width: 100%;
}

Після цього до зображення можна застосовувати властивість object-fit.

.thumb > img {
  display: block;
  height: 100%;
  width: 100%;

  object-fit: cover;
}

Корисно

Можна не використовувати «тумбу», задавши фіксовані розміри самому елементу <img>, але здебільшого ви зустрінете саме таку розмітку. «Тумба» слугує контейнером для створення анімацій та інших декоративних ефектів, пов'язаних з областю зображення.

Властивість object-position

Доповнює властивість object-fit, дозволяючи задати положення зображення в контейнері по осях X і Y. Це схоже на background-position, але для контентних зображень.

object-position: position | initial | inherit

Значенням властивості можуть бути зарезервовані слова, абсолютні або відносні одиниці вимірювання. За замовчуванням значення 50% 50%, тобто вертикально і горизонтально по центру.