CSS-свойство object-fit определяет, как элемент <img>, <video> или <object> должен заполнять свой контейнер, если размеры элемента не совпадают с размерами контейнера.
Свойство object-fit принимает следующие значения:
- fill — по умолчанию, элемент заполняет всю доступную область контейнера, соответственно искажая пропорции картинки, если нужно.
- contain — элемент вписывается в контейнер полностью, не искажая при этом его пропорции, «вписывая» его в размер контейнера.
- cover — элемент заполняет всю доступную область контейнера, обрезая при этом лишнее, сохраняя при этом пропорции изображения.
- none — элемент отображается в своих исходных размерах, не увеличиваясь и не уменьшаясь.
- scale-down — элемент отображается в своих исходных размерах, если они меньше чем размер контейнера. Если размеры элемента больше чем размер контейнера, то элемент уменьшается, как при использовании значение contain.
Например:
img {
width: 500px;
height: 500px;
object-fit: cover;
}
Этот код установит изображение размером 500 на 500 пикселей с обрезанием лишних частей, чтобы оно полностью заполнило контейнер, который может быть пропорционально другим размерам.
