How To Set Image In Box Without Stretch Image

In This Topic,

We are going to see the set image inbox without stretch image with object-fit: cover property.

This CSS property works like the background-size: cover property for the image. The image is resized to fit its content box.

It resizes to cover its container. Fills the entire box with the image.

1. HTML file

<html>
<body>
<h1> Example of Object-fit: cover property </h1>
<div class="main">
    <h2> Original image </h2>
    <div class="center">
        <img src ="https://i.imgur.com/YczIY1E.jpg" alt="Original image">
    </div>
    <h2> object-fit: cover; </h2>
    <div class="center">
        <img class="objet-cover" src="https://i.imgur.com/YczIY1E.jpg" alt="object-fit: cover image" >
    </div>
</div>

</body>
</html>

2. CSS

.objet-cover {
    object-fit: cover;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.center {
    width: 300px;
    height: auto;
    border: 7px solid red;
}

Now open your HTML in the browser. You can see the difference between the original image and with object-fit: cover image.

Please review The Below Screen Short.

Also check, Manage 16:9 ratio in an image using CSS