Type to generate custom UI components with AI

Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

Use CSS Object Fit to Make Your Web Experience Great

In web design, the CSS object-fit property is a handy tool for developers, especially when it comes to handling images. It helps solve the ongoing challenge of dealing with images in designs that need to work well on different screen sizes.

Simply put, object-fit focuses on keeping the original shape of an image when you resize or adjust it to fit into its space. It’s a smart way to control how images look without stretching or distorting them.

In this guide, we’ll break down the different options you have with object-fit. We’

ll explain when to use each one, share examples, and help you understand how it makes your website look great and work smoothly for users.

CSS Object-fit Property Values:

There are 5 object-fit property values which we’ll be going over:

  • object-fit: fill

  • object-fit: contain

  • object-fit: cover

  • object-fit: none

  • object-fit: scale-down

What is the Object fit property?

The object-fit property sets how the contents of the replaced elements, such as the <img> or <video> element, are to be resized to fit its container.

If you’d like to learn more about the replaced elements, please visit the MDN documentation here

For this article, we’ll only be discussing about the <img> element along with the CSS object-fit property, however, the object-fit property can also be used with the video element.

Examining the Inherent Characteristics of an Image

Before we go over all the object fit properties, let’s see why we may need them first by examining the default characteristics of an image.

Consider the code below:

<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg"   
  alt="Forest sunny view"
>

Here’s the preview on the browser:

Notice there wasn’t any width or height property attached to the image, but it assigned a width and height property by the browser. Let’s see another code for an image to really drive the point home:

<img 
  src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" 
  alt="Camera girl"
>

Here’s the preview of the image on the browser

Now let’s place both images side by side

<body>
  <img src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" alt="Forest sunny view">

  <img src="https://buffer.com/library/content/images/size/w1200/2023/10/free-images.jpg" alt="">
</body>

Then we get this, where you can see one image width and height is greater than the other

The browser viewport was zoomed out to show the two images

This shows us that the browser checks the image src path for their metadata containing the width and height properties to know how to render the images on the browser. Hence making one image small while the other big. In a case where we’d like to have a fixed width and height, let’s see what happens.

<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="1000" 
  height="400"
>

Here’s the preview

Notice how the image because stretched? The image doesn’t preserve the default aspect ratio any more and that’s not a good thing. In other to preserve the image aspect ratio, that’s where the object-fit property comes in.

Using object-fit: fill Property Value

The fill value stretches the image to completely cover the container, disregarding its aspect ratio. To illustrate this, here’s an example:

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="1000" 
  height="400"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: fill;
  border: 1px dashed #000;
}

Here’s the preview on the browser:

Notice how the image is stretched to fit the image container of 1000px width and 400px height. However, in the case where the height and width of the image confirms to the image aspect ratio, it wouldn’t appear stretched, here’s an example illustrating this:

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="641" 
  height="408"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: fill;
  border: 1px dashed #000;
}

Here’s the preview on the browser

Here’s the aspect ratio of the image is maintained and not stretched, because the width and height attribute values specified where aligned to the image aspect ratio.

Using object-fit: contain Property Value

The contain value ensures the image fits within the container without distortion, maintaining its original aspect ratio. To illustrate this here’s an example:

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="1000" 
  height="400"
>

Notice the width attribute value as 1000px and the height attribute value as 400px

/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: contain;
  border: 1px dashed #000;
}

Here’s the preview:

Despite the image container being 1000px width and 400px height, the image aspect ratio was contained within the image.

Using object-fit: cover Property Value

The cover value ensures that the image maintains its aspect ratio while filling the element’s entire content box. So it appears as if the image was zoomed in, within the image container.

Here’s an example:

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="641" 
  height="408"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: cover;
  border: 1px dashed #000;
}

Here’s the preview on the browser:

Notice how the image looks zoomed in while maintaining its aspect ratio.

Using object-fit: none Property Value

With the none value, the image is not resized or stretched in any way, it maintains the aspect ratio of the element, in this case, the image.

There are two instances of example here, one when the available space is bigger than the image aspect ratio and the other when the image is larger than the available space.

In this example, the available space is bigger than the image aspect ratio.

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="641" 
  height="408"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: none;
  border: 1px dashed #000;
}

Here the aspect ratio of the image is maintained, but you can still see the available space within the container.

The second example would be where the image is larger than the available space, to illustrate this, the width and height attribute values has been reduced to 400px

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="400" 
  height="400"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: none;
  border: 1px dashed #000;
}

Here’s the preview on the browser:

Using object-fit: scale-down Property Value:

The scale-down value implies that the content, in this case, the image will always show the appropriate aspect ratio, either when the available space is bigger than the image aspect ratio or when the image is larger than the available space. In other words, the scale-down values act like the none value (whereby the image is not resized) and the contain value (whereby the image fits within the container without distortion).

Here’s an example to illustrate this:

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="400" 
  height="400"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: scale-down;
  border: 1px dashed #000;
}

Here’s the preview on the browser:

Looking at the image above, you’ll notice that the image retains its aspect ratio and shows without distortion even when the content box still has available space. Let’s see another example.

In this example, the image width would be 1000px while the height would be 400px.

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="1000" 
  height="400"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: scale-down;
  border: 1px dashed #000;
}

Here’s the preview on the browser:

From the preview above, you can still tell the image shows the appropriate aspect ratio, within its container.


Before we proceed, let me tell you about PureCode AI. PureCode.ai is an AI-powered platform that’s built by developers for developers with over 10k AI-generated components that could improve your workflow when it comes to building applications. Make sure you check out PureCode.ai today!

Using Object fit property with Object position

The object-position property is a common property to use along with the object-fit property. The object position specifies the alignment of the selected replaced element’s (img or video element) contents within the element’s box.

The object-position property values comes in different shapes, it could be keyword values such as top, bottom, left or right. Length and percentage values can also be used such 10px and 50%.

To learn more about the object-position property values please visit the MDN documentation here

To illustrate how the object position work, here’s an example

<!-- HTML --->
<img 
  src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_640.jpg" 
  alt="Forest sunny view" 
  width="1000" 
  height="400"
>
/* CSS */ 
img {
  display: block;
  margin: auto;
	
  /* Important properties here */
  object-fit: scale-down;
  object-position: left;
  border: 1px dashed #000;
}

Here’s the preview of the image on the browser

Notice that the image content is now aligned to the left due to the object-position: left property value specified. With the object-position: left value, the image content would have been positioned in the middle of the content box like this:

When should you make use of either Object fit property value?

The choice of when to make use of either one of the values involves a lot of trade-offs and depends on your specific design goals and the nature of the content being displayed. So it’s crucial you test and adjust according to the visual and user experience requirement of your project. However, below are some likely situations where using the property may be appropriate.

1. Use object-fit: fill when:

  • You want the content to completely cover the container, irrespective of its aspect ratio.

  • It is acceptable for the content to be distorted to fill the entire space.

2. Use object-fit: contain when:

  • You want the entire content to fit within the container without distortion.

  • Maintaining the aspect ratio is crucial, and some empty space within the container is acceptable.

3. Use object-fit: cover when:

  • You want the content to cover the entire container while maintaining its aspect ratio.

  • It is acceptable for some parts of the content to be cropped if the aspect ratios differ.

4. Use object-fit: none when:

  • You want to preserve the content’s intrinsic aspect ratio without any scaling or filling.

  • The content should be displayed at its original size, even if it means not filling the entire container.

5. Use object-fit: scale-down when:

  • You want to scale the content down to fit within the container, but only if it is necessary to do so.

  • It serves as a combination of contain and none, scaling down if needed but preserving the aspect ratio.

Diffenrences between the object fit property values

Here’s a tabular view showing the differences between the object fit property values we’ve covered.

ValueDescriptionUse CaseExample
fillStretches content to fill the container without regard to aspect ratio.When distortion is acceptable, and complete coverage is desired..container { object-fit: fill; }
containScales content to fit within the container, preserving aspect ratio.When maintaining the aspect ratio is crucial, and some empty space is acceptable..container { object-fit: contain; }
coverScales content proportionally to cover the entire container.When covering the entire container is desired while preserving aspect ratio..container { object-fit: cover; }
noneDisplays content at its intrinsic size, preserving the aspect ratio.When original size is essential, and no scaling or filling is required..container { object-fit: none; }
scale-downScales content down if necessary, preserving the aspect ratio.Combines aspects of contain and none, scaling down if needed..container { object-fit: scale-down; }

Frequently Asked Questions on Object fit property

Below are some of the most frequently asked questions surrounding the object-fit property

What is object-fit in CSS?

object-fit is a CSS property used to specify how an image or replaced element should be resized to fit its container. It allows developers to control how the content is scaled, preserving the aspect ratio of the original content.

What can I use instead of object-fit?

If object-fit is not supported or an alternative is needed, CSS properties like width, height, and background-size can be used to achieve similar effects, but with potentially less control over the aspect ratio.

What is object-fit: fill vs cover?

object-fit: fill stretches the content to completely cover the container, disregarding its aspect ratio. On the other hand, object-fit: cover scales the content proportionally, covering the entire container while preserving its aspect ratio.

What is contain in CSS?

In the context of object-fit, contain is a value that scales the content to fit within the container while preserving its aspect ratio. It ensures that the entire content is visible inside the container.

What is a containing block?

A containing block in CSS is an element that establishes a new block formatting context, influencing the layout and positioning of its child elements.

How do I make an image cover the screen in CSS?

To make an image cover the screen in CSS, you can use properties like width: 100% and height: 100% along with object-fit: cover. This ensures the image covers the entire screen while maintaining its aspect ratio.

Final Thoughts on the Object-fit Property

In conclusion, the CSS object-fit property stands as a crucial ally for web developers, providing a nuanced approach to handling images within responsive designs. As we reflect on its diverse values and applications, several key takeaways emerge, underscoring the significance of this property in the realm of modern web development.

1. Seamless Responsiveness:

  • object-fit empowers developers to achieve seamless responsiveness, ensuring that images adapt harmoniously to diverse screen sizes and resolutions. The property’s values, such as contain and cover, enable a flexible and adaptive layout that enhances the user experience across a spectrum of devices.

2. Aspect Ratio Preservation:

  • At its core, object-fit revolves around the preservation of an image’s intrinsic aspect ratio. This emphasis on maintaining the original proportions is fundamental for preventing visual distortions and creating visually cohesive designs.

3. Creative Possibilities:

  • The property’s versatility opens doors to creative possibilities in design. Developers can leverage values like fill for bold and immersive visuals or scale-down for a balanced approach that considers both containment and original size.

4. Performance Considerations:

  • object-fit offers a performance-conscious solution. By allowing developers to control how images are scaled and cropped, it contributes to optimized loading times and a smoother overall user experience.

5. Cross-Browser Compatibility:

  • While object-fit is widely supported, developers should be mindful of cross-browser compatibility. Understanding potential fallbacks and alternatives ensures a consistent presentation across various browsers and platforms.

6. Accessibility and User Experience:

  • The property aligns with accessibility principles, particularly when used in conjunction with proper alternative text for images. This commitment to accessibility enhances the inclusivity of web designs, catering to users with diverse abilities.

7. Design Flexibility:

  • object-fit doesn’t just address technical challenges; it offers design flexibility. From hero sections with cover to content-rich layouts with contain, the property serves as a tool for crafting visually engaging and user-centric designs.

In navigating the dynamic landscape of web development, the object-fit property stands as a testament to the industry’s commitment to innovation and user-centric design. By embracing its capabilities, developers can create digital experiences that seamlessly adapt to the evolving expectations of users, ultimately elevating the visual and functional qualities of the web. As we bid goodbye to this exploration, let the principles of object-fit guide your design endeavors, fostering creativity, efficiency, and a steadfast commitment to delivering exceptional user experiences.

Check our Purecode.ai today!

Favourite Jome

Favourite Jome