Object Fit: адаптивное размещение изображений на сайте

object-fit - это CSS свойство, которое определяет, как содержимое элемента должно вписываться в его контейнер.

С помощью этого свойства можно управлять масштабированием содержимого, сохраняя его пропорции и контролируя видимые части элемента.

Пример 1: object-fit: fill

Свойство fill заставляет изображение заполнить всю доступную область контейнера, игнорируя его пропорции. В результате, изображение может быть растянуто или сжато, чтобы заполнить весь контейнер.

.container {
  width: 200px;
  height: 200px;
}

img {
  object-fit: fill;
}

Пример 2: object-fit: contain

Свойство contain позволяет изображению сохранять свои пропорции и целиком помещаться внутри контейнера без искажений. Если изображение не подходит по размерам, оно будет масштабировано, чтобы целиком поместиться в контейнер.

.container {
  width: 200px;
  height: 200px;
}

img {
  object-fit: contain;
}

Пример 3: object-fit: cover

Свойство cover позволяет изображению сохранять свои пропорции, но заполнять всю доступную область контейнера. В результате, часть изображения может быть обрезана, но оно будет заполнить контейнер без искажений.

.container {
  width: 200px;
  height: 200px;
}

img {
  object-fit: cover;
}

Пример 4: object-fit: none

Свойство none означает, что изображение будет отображаться в своем естественном размере, без масштабирования или изменения его формы. Изображение будет центрироваться в контейнере.

.container {
  width: 200px;
  height: 200px;
}

img {
  object-fit: none;
}

Пример 5: object-fit: scale-down

Свойство scale-down выбирает между значениями contain и none в зависимости от того, какое значение лучше подходит для данного случая. Если размеры изображения больше размеров контейнера, то применяется contain. Если размеры изображения меньше размеров контейнера, то применяется none.

.container {
  width: 200px;
  height: 200px;
}

img {
  object-fit: scale-down;
}

Это только несколько примеров использования свойства object-fit. Оно очень полезно при работе с изображениями в CSS, позволяя контролировать их отображение в соответствии с требованиями макета. Установка правильного значения object-fit может существенно улучшить визуальный эффект вашего веб-сайта или приложения.