I utilized the bootstrap card component to showcase products on my online store. I made an effort to ensure that all product images within the cards are of the same height by implementing some custom CSS. While the images do resize properly, there is an issue with them being cut off at the top.
How can I prevent this truncation from happening?
//HTML
<!-- Card for displaying products -->
<div class="card-deck h-100">
<div class="card border-secondary">
<img src="image.jpg" class="card-img-top img-fliud"><!-- Product image goes here -->
<div class="card-body">
Additional card content...
</div>
<div>
<div>
//CSS
/* Ensuring equal height for product images */
.card-img-top {
/*height: 11vw;*/
max-height: 230px;
min-height: 230px;
width: 100%;
object-fit: cover;
}
Any sample code suggestions would be greatly appreciated.