Within a card-group container, I am utilizing pre-built components from Bootstrap. The 'products' variable holds an array of JSON objects representing products for an online shopping store.
<div class="card-group">
<% products.forEach((product) => { %>
<div class="card mb-3" style="max-width: 540px">
<div class="row g-0">
<div class="col-md-4">
<img
src="/uploads/<%= product.image %>"
class="img-fluid rounded-start"
style="height: 12rem; width: 100%"
/>
</div>
<div class="col-md-8">
<div class="card-body">
<h5 class="card-title"><%= product.name %></h5>
<p class="card-text"><%= product.description %></p>
<a href="#" class="btn btn-primary">
<small class="text-body-secondary">View More</small></a
>
</div>
</div>
</div>
</div>
<% }) %>
</div>
An issue arises when the displayed images vary in size, leading to quality loss and misalignment. Are there any tips or techniques to maintain image quality without distortion?
I have experimented with CSS properties like:
width: 100%;
height: auto;
However, this results in misaligned images as depicted here:
One option could be centering the images vertically and horizontally to provide consistency, but I'm uncertain on how to achieve this.