How do I crop card images with object-fit utilities without stretching them?

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

How do I crop card images with object-fit utilities without stretching them?

Asked on Jun 01, 2025

Answer

Bootstrap 5 provides object-fit utilities to control how images fit within their containers. You can use these utilities to crop card images without stretching them by setting the `object-fit` property to `cover`.

<!-- BEGIN COPY / PASTE -->
        <div class="card" style="width: 18rem;">
            <img src="your-image.jpg" class="card-img-top object-fit-cover" alt="Card image" style="height: 200px;">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `object-fit-cover` class ensures the image covers the entire area without stretching, maintaining its aspect ratio.
Adjust the `height` style of the image to control the visible area of the image.
Replace `your-image.jpg` with the path to your image.

✅ Answered with Bootstrap 5 best practices.

Ask any question about Bootstrap here... and get an instant response.

How do I crop card images with object-fit utilities without stretching them?

Asked on Jun 01, 2025

Answer

The Q&A Network