Tóm Tắt

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.

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.

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

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" />