On my website, there are some cards that look great on large and medium screens. However, on small screens, the images appear stretched vertically!
I am using Bootstrap 5 and here is the code snippet:
<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>
Here is an image showing how it looks on large screens:
https://i.sstatic.net/m9lx6.png
And here is an image showing how it looks on small screens: