There are some cards in my website that they are fine in the large and medium screens , But in the small screens the image’s height will be increase !
I’m using bootstrap 5 and there is the code :
<div class="col-12 mb-4">
<div class="card m-auto w-100 h-100 rounded">
<div class="row g-0">
<div class="col-4 h-100">
<img src="{{ i.image.url }}" class="img-fluid rounded h-100" alt="...">
</div>
<div class="col-8">
<div class="card-body">
<p class="weblog-post-title card-title" style="font-size: 1.25rem;">{{ i.title }}</p>
<p class="weblog-summery card-text text-muted">{{ post.summery|truncatechars:70 }}</p>
<div class="row mt-2">
<div class="col-6">
<p class="card-text"><small class="text-muted">{{ i.create|date:"SHORT_DATE_FORMAT" }}</small>
</p>
</div>
<div class="col-6 text-start">
<a href="{{ i.get_absolute_url }}"
class="btn btn-green btn-sm mt-2" style="border-radius: 10px;">see</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
there is the picture of large screens :
there is the picture of small screens:
>Solution :
you can use Media Queries (sm:, md:, lg:, xl:, xxl:) to make the images responsive