Tuesday, December 10

How to resize an Image using CSS object-fit Property

The CSS object-fit property is used to specify how an image or video should be resized to fit its container. This property tells the content to fill the container in a variety of ways; such as “preserve that aspect ratio” or “stretch up and take up as much space as possible”.

Example: We can use object-fit property like below.

img {
width: 200px;
height: 400px;
object-fit: cover;
}

 

The object-fit property can have the following values:

fill – This is default. The replaced content is sized to fill the element’s content box. If necessary, the object will be stretched or squished to fit
contain – The replaced content is scaled to maintain its aspect ratio while fitting within the element’s content box
cover – The replaced content is sized to maintain its aspect ratio while filling the element’s entire content box. The object will be clipped to fit
none – The replaced content is not resized
scale-down – The content is sized as if none or contain were specified (would result in a smaller concrete object size)

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x