Know About CSS Object Fit and Position Properties: Hi Friends, Today i will tell you about some useful CSS properties like object fit and object position of an image. These property defines the place of an images, videos in the box.
Get to know about the property of cropping the fit into the size like object-fit and object-position.
The object-fit CSS property is used to define how an image, video and other types of formats fit in the respect of height and width in the box. It is related to object-position property of the CSS. Object-fit property is used to crop the image or other media formats into best posible squishes and stretches inside its box. Yo don’t need to crop the image outside of the code, you can crop the image using object-fit property.
You can use anyone below object-fit value according to your requirement. Values of object-fit are
fill is the default value of object-fit which stretches image to fit the box, without caring about of its aspect-ratio.
img { width: 100%; object-fit: fill; } |
img { width: 100%; object-fit: fill; }
contain property is used to increase or decrease the size of an image or video to fill the box with preserving and caring about its aspect-ratio.
img { width: 100%; object-fit: contain; } |
img { width: 100%; object-fit: contain; }
cover property is same as contain property but it crop the image according to your requirement. object-positon property is very helpful to crop the image properly.
img { width: 100%; object-fit: cover; } |
img { width: 100%; object-fit: cover; }
none property is ignoring the height and width and use their original size.
img { width: 100%; object-fit: none; } |
img { width: 100%; object-fit: none; }
scale-down property is used like a combination of none and contain property in order to give the best smallest image or any media format.
img { width: 100%; object-fit: scale-down; } |
img { width: 100%; object-fit: scale-down; }
The object-position property is used with object-fit property and used to define how an image, video or any other media format is positioned using X and Y coordinates inside box. This property is taking the X and Y numerical values, such as 10% 20% or 10px 20px. The first numeric shows that the image should be positon at the top of the box (10) and second numeric shows that it positioned 20% or 20px from the right. You can also use negative values.
object-position: 50% 50%; or object-position: center;
You can change it according to your requirement.
I hope you will like Know About CSS Object Fit and Position Properties. If You found it useful please subscribe my blog
Categories: Website Design
Leave a Reply