CSS object-fit Property

The object-fit property specifies how an image fits its container.

The image may be scaled down, shown fully, or cropped to make it fit.

The object-position property is often used to set the image position.

Example

#

The image is stretched to the specified height and then cropped using object-fit: cover.



Original Image:
<style>
  .image-fit {
    object-fit: cover;
    width: 150px;
    height: 350px;
    border: 2px solid teal;
  }
</style>

<img src="/img/css/the-sower-sm.jpg" class="image-fit">
<br />
<br />
Original Image:
<br />
<img src="/img/css/the-sower-sm.jpg">

Note: object-fit can also be used on video elements.

Syntax

object-fit: fill | contain | cover | scale-down | 
            none | initial | inherit;

Values

#

Value Description
fill Default. Resizes the image to fill the content box. Aspect ratio is not maintained and image may appear stretched or compressed.
contain Resizes image to fit inside the content box. Aspect ratio is maintained. If there is no perfect fit, some open areas will result.
cover Resizes image to fill the content box. Excess content will be cropped. Aspect ratio is maintained. The entire content box will be covered.
scale-down The image is resized as if none or contain were specified. The smallest image size will be used.
none Does not change the image size. The browser decides the best position.
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different object-fit values.

<style>
  .image-example {
    object-fit: scale-down;
    width: 200px;
    height: 350px;
    border: 1px solid #666;
  }
</style>

<img src="/img/css/the-sower-sm.jpg" 
     class="image-example" />

Browser support

This table shows when object-fit support started for each browser.

Chrome
31.0 Nov 2013
Firefox
36.0 Feb 2015
IE/Edge
16.0 Sep 2017
Opera
19.0 Jan 2014
Safari
7.1 Sep 2014

You may also like

Guides