I am facing an issue with a Bootstrap 5 card split into 2 columns.
| First Column | Second column |
|---|---|
| Image1 | Text |
| Image2 | Text |
The challenge arises because not all images are the same size, impacting the overall card size.
I recently discovered a solution (thanks to this forum) to ensure uniform card sizes. However, I am now struggling to make the images fit properly within their respective columns. (Refer to the image below)
Is there a straightforward way to adjust the images to perfectly fit the enclosing div in terms of both height and width, without altering the card size?
https://i.sstatic.net/RCEU8.png
Here is the code snippet:
{% 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;
}