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.