• Главная
>
• HTML/CSS

Когда у вас есть изображение, которое вы хотите втиснуть в конкретный блок, и изображение слишком большое, вы столкнетесь с выбором: урезать его, испортив пропорции, или сжать его, выпуская пустые пространства по краям. Вот здесь object-fit приходит на помощь.

Что такое Object Fit в CSS

CSS свойство object-fit используется для определения масштабирования и управления соотношением сторон контентных элементов, таких как <img> или <video>, в рамках их блока-контейнера или родительского элемента.

Это свойство очень полезно при работе с адаптивными макетами и изображениями разных размеров и пропорций.

Значения object-fit

Свойство object-fit может принимать следующие значения:

• fill: Это стандартное поведение изображений и видео. Они расширяются или сжимаются, чтобы полностью заполнить свои контейнеры, с потерей пропорций.
• contain: Контент сохраняет свое соотношение сторон, но масштабируется так, чтобы его размер максимально соответствовал блоку-контейнера.
• cover: Сохраняет соотношение сторон контента, масштабируя его так, чтобы блок-контейнер был полностью заполнен, при этом возможно обрезка контента.
• none: Оставляет контент в его исходном размере.
• scale-down: Сравнивает результаты работы none и contain и выбирает наименьший конкретный размер.

Пример использования Object Fit 

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

img {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

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

Обратите внимание, что object-fit работает в связке с width и height. Без указания этих параметров, object-fit не будет иметь видимого эффекта.

Далее расмотрим такое свойство как object-position. Это свойство позволяет выполнять более детальный контроль над положением масштабируемых изображений или видео.

Что такое Object Position в CSS

Свойство CSS object-position определяет положение (координаты x и y) внешнего содержимого, такого как изображение или видео, в рамках элемента. 

Object Position обычно используется в сочетании со свойством object-fit, чтобы контролировать положение контента при управлении его масштабированием.

Значения object-position соответствуют значениям свойства background-position. Два значения, указанные в процентах или пикселях, соответствуют позиции по горизонтали (x) и вертикали (y) соответственно. Если указано только одно значение, второе значение по умолчанию устанавливается в 50%.

Значения object-position

• object-position: 0 0; задаст изображению точку привязки в верхний левый угол его контейнера (в процентах или пикселях). 
• object-position: 50% 50%; (значение по умолчанию) ориентирует изображение так, что его центр соответствует центру его контейнера.

Пример использования Object Position

Давайте предположим, что у вас есть квадратный контейнер, а внутри него — прямоугольное изображение. Вы используете object-fit: cover; чтобы обеспечить максимальное заполнение контейнера без искажения изображения. Но вам нужно убедиться, что верхняя часть изображения видна, а не центр. Для этого вы можете использовать object-position, чтобы сместить точку привязки изображения к верхнему краю контейнера, например так:

img {
    object-fit: cover;
    object-position: 50% 0;
    width: 200px;
    height: 200px;
}

В этом случае, изображение масштабируется с использованием object-fit: cover;, но вместо центрирования (которое является поведением по умолчанию), верхняя часть изображения приравнивается к верхнему краю контейнера.