CSS Object Fit and Placement

CSS Object Fit and Placement
Nikhil
Published on 2021-07-09 06:12:42

object-fit


The object-fit property will define how an element will fit into a box with an established height and width. Usually applied to an image or video, Object-fit accepts the following five values:

FILL

object-fit:fill;

Fill stretches the image to fit the content box without regard to the image's original aspect ratio.

CONTAIN

object-fit:contain;

Contain fits the image in the box's height or width while maintaining the image's aspect ratio.

COVER

object-fit:cover;

Cover fills the entire box with the image. The image aspect ratio is preserved, but the image is cropped to the dimensions of the box.

NONE

object-fit:none;

None ignores the size of the box and is not resized.

SCALE-DOWN

object-fit:scale-down;

Scale-down either size the object as none or as contain. It displays whichever option results in smaller image size.

 

ATutorialHub Related Guide

Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website