CSS Object Fit: Как использовать и настроить

CSS свойство `object-fit` позволяет задавать, как содержимое элемента-контейнера должно помещаться внутри этого контейнера. Оно работает в сочетании с свойством `width` и `height`.

Для понимания `object-fit` рассмотрим пример использования. Предположим, у нас есть элемент контейнер `div` и вложенный элемент `img`.

html

  

Допустим, что мы хотим менять размеры картинки, чтобы она заполняла контейнер полностью, но сохраняла свой оригинальный аспект-расположение. В этом случае мы можем использовать свойство `object-fit`.

css
.container {
  width: 400px;
  height: 300px;
  border: 1px solid #000;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

В данном примере мы задали ширину и высоту контейнера и указали `border`, чтобы лучше отделить его от окружающих элементов. Затем мы определили размеры картинки и добавили свойство `object-fit: cover;`.

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

Также существуют другие значения `object-fit`: `fill`, `contain`, `none`, `scale-down`; каждое из которых подходит для разных задач).

css
img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Значение `contain` масштабирует содержимое элемента по всей высоте и ширине контейнера, которые указаны в свойствах `width` и `height`. В отличие от `cover`, `contain` позволяет сохранить пропорции и не обрезает картинку, если она не помещается в контейнер. Если картинка должна быть ниже или узкая для контейнера, `contain` добавит пустые пространства вокруг содержимого.

css
img {
  width: 100%;
  height: 100%;
  object-fit: none;
}

Значение `none` отключает масштабирование содержимого и позволяет элементу-контейнеру растягиваться, чтобы вместить содержание в полном объёме.

css
img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

Значение `scale-down` масштабирует элемент только в том случае, если его родитель не может отобразить его в исходном размере.

В заключение, свойство `object-fit` предоставляет удобный способ управлять размерами содержимого элемента, особенно в случаях, когда вы хотите изменить размеры картинки, чтобы она вмещалась в контейнер, не изменяя её размеры. К сожалению, оно не поддерживается старыми браузерами, такими как Internet Explorer 11.