I have put together a collection of Bootstrap 4 cards in the following format...
<div class="row">
<!-- column -->
<div class="d-flex align-items-stretch col-xs-12 col-sm-6 col-md-4 col-lg-2 p-2">
<!-- card -->
<div class="card rounded-0 w-100 bg-white">
<a href="http://www.example.com/destination.html">
<img src="http://www.www.example.com/images/photo.jpg" class="card-img-top img-responsive w-100">
</a>
<div class="card-body">
<h6 class="card-title">Bookish Blaenavon opens new chapter</h6>
</div>
</div>
<!-- end card -->
</div>
<!-- end column -->
<! -- more of the same cards here +++ -->
</div>
The images vary in size, but with the help of the .card-img-top class, they all appear uniform in dimensions.
Width:
To ensure consistent width, I have included .w-100 to both .card and the img, although it may not be necessary for the latter.
Additionally, my stylesheet specifies object-fit: cover; for .card-img-top.
So far, the setup seems effective, eliminating the need for a card deck to maintain consistency. I am satisfied if this method is appropriate.
Card Height:
To enforce equal-height cards regardless of content length, I utilize d-flex align-items-stretch within the column. This approach has been successful.
Image Height:
However, an issue arises here.
In addressing this concern, I have assigned a CSS attribute height to .card-img-top...
/* Equal-height card images, cf. https://stackoverflow.com/a/47698201/1375163*/
.card-img-top {
height: 11vw;
object-fit: cover;
}
The problem lies in the fact that the img maintains the same height at every browser width, resulting in undesirable shortness at sm breakpoint, as illustrated below...
https://i.sstatic.net/EJmzP.gif
Is there a way to make the image height truly responsive, adjusting its height across different breakpoints?
Can this be achieved using Bootstrap 4 functionality instead of creating custom media queries to match its predefined widths?
Could any aspects related to width affect the outcome in terms of height?