CSS Object Fit

Object Fit Property

CSS Object Fit property is used to fit image or fit video in a frame or div to resize properly. We can also use object-position to change position of object-fit.

Object Fit is used when the outer container is larger or smaller then the image/video. We also use width and height 100% with object-fit property.

Object-fit can also change aspect-ration of image or video.

Object Fit Example

• fill
• contain
• cover
• none
• scale-down

Object Fit Usage

Object fit is used form img or video tag. To use Object fit in image, first set width and height of image 100% and then use object fit.

Without Object Fit

<style<
    .box{ width:300px; height:200px }
    .box img{ }
</style<

Object Fit fill

Object fit fill resize image or video in full space of parent container.

<style<
    .box{ width:300px; height:200px }
    .box img{ width:100%; height:100%; object-fit:fill}
</style<

Object Fit contain

Object fit contain resize image or video in parent container while maintaining its aspect-ratio.

<style<
    .box{ width:300px; height:200px }
    .box img{ width:100%; height:100%; object-fit:contain}
</style<

Object Fit cover

Object fit cover resize image or video cover full space of parent container

<style<
    .box{ width:300px; height:200px }
    .box img{ width:100%; height:100%; object-fit:cover}
</style<

Object Fit none

Object fit none resize image or video does not resize content.

<style<
    .box{ width:300px; height:200px }
    .box img{ width:100%; height:100%; object-fit:none}
</style<

Object Fit scale-down

Object fit scale-down resize image or video as none or contain, resulting in smaller size.

<style<
    .box{ width:300px; height:200px }
    .box img{ width:100%; height:100%; object-fit:scale-down}
</style<

Object Fit with object-position

Object fit position is also used with Object-fit to change position of object. Default position is left top. We can use left center right for x-axis, top center bottom for y-axis , px , or percentage.

Object Position left top

<style<
    .box{ width:300px; height:200px }
    .box img{ width:100%; height:100%; object-fit:fill}
</style<

Object Position right bottom

<style>
.box{ 
    width:300px; 
    height:200px
}
.box img{ 
    width:100%; 
    height:100%; 
    object-fit:fill; 
    object-position:right bottom;
}
</style>