How to Apply cover/contain to an Image Element Using CSS?

You can use the object-fit CSS property to specify how the content of the <img> HTML element should be resized to fit within its content box. It accepts the following values:

Value Description
fill (Default) Image completely fills the content box, or is stretched-to-fit if its aspect ratio does not match the aspect ratio of the element's content box.
contain Image is scaled to maintain its aspect ratio if it doesn't fit within the element's content box.
cover Image is sized to maintain its aspect ratio while filling the element's entire content box, or is clipped-to-fit/cropped otherwise.
none Image is not resized.
scale-down Image is scaled down to the smallest version between none or contain.

For example:

img {
    width: 100%;
    height: 80px;
    object-fit: contain;
}

This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.