Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS The object-fit Property

20 minutes

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4

Text lesson

CSS The object-fit Property

The CSS object-fit Property

The CSS object-fit property dictates how an <img> or <video> should be resized to fit its container.

This property instructs the content to occupy the container in different manners, such as preserving the aspect ratio or stretching to utilize maximum space.

Consider the following image of Paris. It has a width of 400 pixels and a height of 300 pixels.

However, if we adjust the styling of the image mentioned earlier to be half its original width (200 pixels) while maintaining its height (300 pixels), it will appear as follows:

Example

img {
width: 200px;
height: 300px;
}

We observe that the image is being compressed to accommodate the container size of 200×300 pixels, resulting in the destruction of its original aspect ratio.

This is where the object-fit property becomes useful. The object-fit property offers several values:

fill: This is the default behavior. The image is resized to fill the specified dimensions. If necessary, the image will be stretched or compressed to fit.
contain: The image maintains its aspect ratio but is resized to fit within the specified dimensions.
cover: The image preserves its aspect ratio and fills the specified dimensions. However, the image may be clipped to fit.
none: The image remains unchanged and is not resized.
scale-down: The image is scaled down to the smallest size achievable by either none or contain.

Using object-fit: cover;

When employing object-fit: cover; the image maintains its aspect ratio and occupies the specified dimensions. However, the image may be clipped to fit entirely within the container.

Example

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

Using object-fit: contain;

When utilizing object-fit: contain; the image preserves its aspect ratio while being resized to fit within the specified dimensions.

Example

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

Using object-fit: fill;

When utilizing object-fit: fill; the image is adjusted to completely occupy the specified dimensions. If needed, the image will be either stretched or compressed to fit accordingly.

Example

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

Using object-fit: none;

When employing object-fit: none; the image retains its original size without any resizing.

Example

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

Using object-fit: scale-down;

When object-fit: scale-down; is applied, the image is adjusted to a size that is either its original size or the size specified by the contain property, whichever is smaller.

Example

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

Another Example

In the given scenario, we have two images intended to occupy 50% of the browser window’s width and 100% of its height.

However, without utilizing object-fit, resizing the browser window may distort the aspect ratio of the images.

Example

In the subsequent example, we apply object-fit: cover;, ensuring that when we resize the browser window, the aspect ratio of the images remains intact.

Example

CSS object-fit More Examples

The forthcoming example showcases a demonstration encompassing all conceivable values of the object-fit property.

Example

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}