Currently, I am utilizing Bootstrap's grid system along with a simple card element. Within the card, I am dynamically rendering a background image similar to Instagram's grid system. Everything seems to be functioning correctly, except for when the column width drops below a certain point, causing the card to resize to about 10% of its original height and making the image barely visible.
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="card" style=" min-height: 100%; min-width:
100%;background-image: url('<%= rails_blob_path(post.images.first)
%>'); background-position: center; background-size: cover;">
</div>
</div>
</div>
col-md-4: Working fine as expected:
https://i.sstatic.net/GoLHJ.png
However, once it goes below col-sm-4 (or md), it starts looking like this:
https://i.sstatic.net/iNfQp.png
When resizing the browser width down, the card height snaps to match the second image shown above.
Is there a way to adjust the sizing of the card in the second picture to maintain full height without affecting the other column widths? Adding "min-height: 200px;" resolves the issue, but distorts the appearance of the other columns by stretching them out.
I apologize if this is a basic question. Although I have come across some resources, I struggle to implement a solution since my expertise lies more in backend development rather than front-end Bootstrap mechanics.