How do I add an image to a div without distorting it?

In this post, we will learn how to add an image to a div without distorting, and below are the details.

• When we add an image to a page using the HTML <img> element, the image will maintain the size and aspect ratio of the image file.
• By default image will take height and width of image itself OR height & width defiled in the HTML attributes.
• To display the image with <div> OR container dimensions (Height & Width) below mentioned CSS property can be used.

.image-container img {
    width: 100%;
    height: 100%;
}

.image-container img {
    object-fit: cover;
}


<div class="image-container">
    <img src="logo.png" alt="Logo">
</div>  

• As mentioned above image-container class can be used to display image with containing full height and width.
• We have used object-fit property to display image without distorting it.