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.