CSS Examples
How to Resize an Image and also Maintain its Aspect Ratio using CSS
In this example, we will learn how to resize an image and also maintain its aspect ratio using CSS. We can use object-fit property to specify how to resize an image or video.
Prerequisites
Example
Here, we will have a look at two images: one without object-fit property and another with the object-fit property set to contain. the contain value will resize the image by maintaining its aspect ratio. The size is given by defining the height and width properties.
.img-1,
.img-2 {
height: 200px;
width: 200px;
border: 1px solid red;
}
.img-2 {
object-fit: contain;
}
</style
Output
Conclusion
In this example, we learned how to resize an image and also maintain its aspect ratio using CSS. We used height and width properties to resize an image and object-fit property to maintain its aspect ratio.