object-fit

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

📝 Описание

Управляет тем, как содержимое замещаемого элемента (img, video) должно масштабироваться относительно его контейнера.

Значение по умолчанию: fill

🎯 Возможные значения

  • fill — растягивается, чтобы заполнить контейнер
  • contain — масштабируется с сохранением пропорций
  • cover — заполняет контейнер с обрезкой
  • none — не масштабируется
  • scale-down — как none или contain, в зависимости от размера
.hero-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

🌐 Поддержка браузеров

Chrome 32+, Firefox 36+, Safari 10+