To fill an image in CSS without stretching it, we can use the object-fit property along with the width and height properties. The object-fit: cover property ensures that the image covers the entire container without stretching it. It maintains the aspect ratio of the image and may crop some parts of the image to fit it within the container. Alternatively, the background-size: cover property can also be utilized to achieve the same effect.

Using the object-fit: cover Property

Create an image container and specify the width and height. Set the object-fit: cover property and overflow:hidden property to maintain the image’s aspect ratio and fill the container without stretching the image.

Example: Illustration of Filling CSS Image Size Without Stretching Using the object-fit property.

Output:

Output

Using background-size: cover Property

A centered flex layout with a container containing two image div. The original image display using the <img> tag and the modified one is using background images to achieve a filled appearance without stretching. The original image uses the <img> tag with object-fit: contain, while the modified version employs background images with background-size: cover for a consistent appearance. The fixed width and height of the containers prevent stretching while maintaining the original aspect ratio of the images.

Example: Illustration of Filling CSS Image Size Without Stretching using the background-size: cover property.

Output:

Output