Object Fit: Как подгонять изображения в контейнере

Object Fit - это свойство CSS, которое позволяет задать способ изменения размеров и положения элементов внутри контейнеров, подобно свойству background-size. Оно может применяться к элементам, содержащим изображения, видео или другие медиа-элементы.

Как и свойство background-size, Object Fit может принимать различные значения, включая cover, contain, fill, none и scale-down. Рассмотрим их детальнее:

• cover: элемент будет увеличен или уменьшен так, чтобы заполнить контейнер, сохраняя при этом соотношение сторон. Если содержимое элемента имеет другие пропорции, то оно будет обрезано.

css
img {
    object-fit: cover;
}

• contain: элемент будет увеличен или уменьшен так, чтобы вместиться полностью в контейнер, сохраняя при этом соотношение сторон.

css
img {
    object-fit: contain;
}

• fill: элемент будет изменен так, чтобы точно соответствовать размерам контейнера, не сохраняя при этом соотношение сторон.

css
img {
    object-fit: fill;
}

• none: содержимое элемента не будет изменено и будет отображаться в его изначальном размере и положении.

css
img {
    object-fit: none;
}

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

css
img {
    object-fit: scale-down;
}

Помимо этого, Object Fit может принимать значения left, right, center, top, bottom, и их сочетания, которые задают положение элемента внутри контейнера.

css
img {
    object-fit: cover;
    object-position: center top;
}

Object Fit полезен для создания адаптивных дизайнов, когда требуется масштабировать изображения и видео, чтобы они соответствовали размерам контейнера на разных устройствах.