# object-fit property

The `object-fit` property specifies an aspect ratio or scaling of elements such as an image or video.

## Syntax

`selector { object-fit: fill or contain or cover or none; }`

The table shows the main values ​​for the `object-fit` property:

## Values

Value | Description
--- | ---
`fill` | Scales an element to fit the specified dimensions, ignoring the element's proportions.
`contain` | Scales an element to fit specified dimensions while maintaining the element's proportions.
`cover` | The element's dimensions are changed to completely fill the specified area, while the proportions of an element itself are maintained.
`none` | The original dimensions of an element are preserved.

## Example

Let's fill our image with the specified size without preserving the proportions:

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

:

## Example

Now let's make the image fill the specified container while maintaining the proportions:

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

:

## Example

Let's fill the specified container with our image so that the size of the image itself changes, but its proportions are preserved:

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

:

## Example

Let's just place our image in the specified container while maintaining its original dimensions:

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

:

## See also

- the `aspect-ratio` property
  that determines the aspect ratio of an element

← →
↑
en ru