CSS Object Fit and Placement object-fit

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

The object-fit property will defines 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;

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;

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;

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;

object-fit:none;

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

SCALE-DOWN

object-fit:scale-down;

Scale-down either sizes the object as none or as contain. It displays whichever option results in a smaller image size. object-fit:scale-down;



Got any CSS Question?