Ниже приведен пример использования свойства CSS object-fitдля управления размещением изображения или видео в контейнере:

HTML:

<div class="container">
  <img src="image.jpg" alt="Example Image">
</div>

CSS:

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

В этом примере элемент div .containerпредставляет элемент контейнера, а тег img— элемент, отображаемый внутри него. Для свойства object-fitустановлено значение cover, что означает, что изображение будет масштабироваться так, чтобы покрыть весь контейнер, сохраняя при этом соотношение сторон. Свойство overflow: Hidden;гарантирует, что любая часть изображения, превышающая размеры контейнера, будет скрыта.

Другие значения, которые можно использовать с object-fit:

1. fill: изображение или видео заполняет контейнер независимо от соотношения сторон. Он может быть искажен, если контейнер имеет другие пропорции.
2. contain: изображение или видео масштабируется, чтобы сохранить соотношение сторон и при этом поместиться в контейнер. Если пропорции будут другими, внутри контейнера может остаться пустое пространство.
3. нет: изображение или видео сохраняет исходные размеры и не заполняет контейнер и не помещается в него. Контейнер может переполниться, если его размеры больше.
4. уменьшение: изображение или видео уменьшается, чтобы поместиться в контейнере, если оно превышает размеры контейнера. В противном случае он ведет себя как none.