Flash cards
Review the key moves
What is the main idea behind CSS object-fit Property?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
Which statement best captures the main point of this lesson?
Complete the missing token from the example code.
.___-container {Put the learning moves in the order that makes the concept easiest to apply.
The CSS object-fit property is used to specify how an <img> or <video> should be resized to fit its container.
This property can take one of the following values:
- fill - This is default. Does not preserve the aspect ratio. The image is resized to fill the container (the image will be stretched or squeezed to fit).
- cover - Preserves the aspect ratio, and the image fills the container. Cuts overflowing content if needed.
- contain - Preserves the aspect ratio, and fits the image inside the container, without cutting - leaves empty space if needed.
- none - The image is not resized.
- scale-down - the image is scaled down to the smallest version of none or contain.
Using object-fit: fill;
The object-fit: fill; value does not preserve the aspect ratio, and the image is resized to fill the container (the image will be stretched or squeezed to fit):
Example
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
} .image-container img {
width: 100%;
height: 100%;
object-fit: fill;
}Live preview
Using object-fit: cover;
The object-fit: cover; value preserves the aspect ratio, and the image fills the container. The image will be clipped to fit:
Example
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
} .image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}Live preview
Using object-fit: contain;
The object-fit: contain; value preserves the aspect ratio, and fits the image inside the container, without cutting - will leave empty space if needed:
Example
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
} .image-container img {
width: 100%;
height: 100%;
object-fit: contain;
}Live preview
Using object-fit: none;
The object-fit: none; value does not resize or scale the image:
Example
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
} .image-container img {
width: 100%;
height: 100%;
object-fit: none;
}Live preview
Using object-fit: scale-down;
The object-fit: scale-down; value scales the image down to the smallest version of none or contain :
Example
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
} .image-container img {
width: 100%;
height: 100%;
object-fit: scale-down;
}Live preview
Another Example
Here we have two images and we want them to fill the width of 50% of the browser window and 100% of the height of the container.
In the following example we do NOT use object-fit , so when we resize the browser window, the aspect ratio of the images will be destroyed:
Example
In the next example, we use object-fit: cover; , so when we resize the browser window, the aspect ratio of the images is preserved:
CSS object-* Properties
The following table lists the CSS object-* properties:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |