# Свойство object-fit

Свойство `object-fit` задает соотношение сторон или масштабирование таких элементов как изображение или видео.

## Синтаксис

`селектор { object-fit: fill или contain или cover или none; }`

В таблице представлены основные значения для свойства `object-fit`:

## Значения

Значение | Описание
--- | ---
`fill` | Масштабирование элемента для соответствия заданным размерам, при этом пропорции элемента игнорируются.
`contain` | Масштабирование элемента для соответствия заданным размерам, при этом пропорции элемента сохраняются.
`cover` | Размеры элемента изменяются, чтобы целиком заполнить указанную область, при этом пропорции самого элемента сохраняются.
`none` | Исходные размеры элемента сохраняются.

## Пример

Давайте зададим нашему изображению заполнение указанного размера без сохранения пропорций:

`<div> <img src="bg.png"> </div>` `img { object-fit: fill; height: 400px; width: 300px; border: 1px solid black; }`

:

## Пример

А теперь давайте сделаем так, чтобы изображение заполнило указанный контейнер с сохранением пропорций:

`<div> <img src="bg.png"> </div>` `img { object-fit: contain; height: 400px; width: 300px; border: 1px solid black; }`

:

## Пример

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

`<div> <img src="bg.png"> </div>` `img { object-fit: cover; height: 400px; width: 300px; border: 1px solid black; }`

:

## Пример

Давайте просто поместим наше изображение в указанный контейнер с сохранением его исходных размеров:

`<div> <img src="bg.png"> </div>` `img { object-fit: none; height: 400px; width: 300px; border: 1px solid black; }`

:

## Смотрите также

- свойство `aspect-ratio`,
  которое определяет соотношение сторон элемента

← →
↑
en ru