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