Using CSS object-fit and background-size properties

If you want images of different sizes and formats to be displayed in one HTML element, but to keeps the proportions, then you can use the cover and contain values for the object-fit and background-size properties in CSS. These values are the same for both properties and perform the same task.

What is the difference between object-fit and background-size, and how can you use them?

The way how the image source will be changed during further editing of the website content is one of the differences. Bellow, I will show a situation when the parent element should always be filled with the image without stretching or shrinking. There you use cover value.

CSS background-size property

You can use this property when you assign a background image to a particular element. The image source is defined by the value url ('URL'), for example:

div {
width: 1170px;
height: 530px;
background-image: url(‘honey-bee.png’);
background-size: cover;
}

The image will be displayed as the background of the corresponding div element.

The advantage of this property is that the image is not displayed through the img element. In this way, the image is a background of the div element. This reduces the number of HTML requests when loading a website page.

The downside is that changing the image has to be done by editing the CSS file, so it's not convenient when the image source is changed frequently.

CSS object-fit property

Unlike the previous property, you can use object-fit for images contained in the img element. For example, if you have an img element inside a div element, then you define the properties like this:

div {
width: 480px;
height: 790px;
}

img {
object-fit: cover;
width: 100%;
height: 100%;
}

The advantage of this feature is that once you define the values in the CSS file, the image source can be changed through the website administration. In addition to images, the object-fit property can also be used for videos and other media formats.

The bad thing is if the website page has more img elements, which means more HTML requests are required when page loading. And that's not SEO-friendly.

Positioning the image in relation to the corresponding element

In both cases, the image will be positioned centrally within the frame of the element by default. This can be changed with the object-position property for object-fit, or the background-position for background-size.

Values can be keywords (left, right, top, bottom, center) or numbers (in px or %). The first value controls the x-axis and the second the y-axis.

For example:

img {
object-fit: cover;
object-position: 100% 0;
}

The position of the image in relation to the element will be left/up. The same position can be defined with object-position values: left top;

Conclusion

Both methods are useful for heroes or other images that need to be responsive on various screens, but to fill the entire frame of the corresponding element and keeps the original aspect ratio. Background images are applied when you want to avoid the img element, while the other method is useful for changeable images and other media such as video.