Search code examples
htmlcssbootstrap-4bootstrap-5

Make images fit inside a card without altering the size of said card (bootstrap 5)

I have a boostrap 5 card split into 2 columns.

First COlumn Second column
Image1 Text
Image2 Text

The problem is that obvioulsy not all image have the same size, which also impacted the size of the cards.

I found a way (on this forum actually) to make the cards all the same size. But I am struggling to make the actual image fit in its respective column. (see image below)

Is there a way to simply make the image fit the div it is in for both height and width, without altering the size of the card?

enter image description here

Code wise, this is what I have: template

{% extends 'main/base.html'%}
{% block content %}
<h1 class="b1">Venues</h1>
<br/>
{% for venue in venue_list%}
<a href="{% url 'show-venue' venue.id%}"> <div class="row mt-2 mb-3 card-horizontal">
    <div class="col-6 mt-2 mb-3 ">
    <img class="card-img-top border-card card-img"  src='{{venue.venue_image}}'>
    </div>

    <div class="col-6 mt-2 mb-3">
    <h4 class="b5">Logo</h4>
    </div>

  </div></a>
{%endfor%}

css

.card-img-top {
        width: 100%;
        height: 20wv;
        object-fit: cover;
    }


    .card-horizontal {
        display: grid;
        grid-template-columns: 300px 1fr;
        grid-template-rows: 158px 22px;
        background-color: #090B1A! important;
        box-shadow: 0px 0px 7px #B3D4DB;
      }
Solution

  • Found the answer, in the css I replaced object-fit: cover by object-fit: contain.

    .card-img-top {
        width: 100%;
        height: 25vw;
        object-fit: contain;
    }

    This had for result to resize the images based on the size allocated to them by the parent card.