Saturday, June 10

Tag: CSS object-fit Property

CSS Tricks

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 rat...