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

<h1> Example of Object-fit: cover property </h1>
<div class="main">
    <h2> Original image </h2>
    <div class="center">
        <img src ="" alt="Original image">
    <h2> object-fit: cover; </h2>
    <div class="center">
        <img class="objet-cover" src="" alt="object-fit: cover image" >


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

Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories