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;
}

Hope you found this post useful. It was published . Please show your love and support by sharing this post.