Bootstrap 4-卡背景图像调整大小问题

Question

So currently I'm using Bootstrap's grid system and a simple card. In the card, I render dynamically the background image. Think of the Instagram grid system. Everything works fine, except that once I go below a defined column width, the card resizes it to maybe 10% of its original height and the image is 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 : Everything nice as excepted:

Below col-sm-4 (or md, doesn't really matter, once it drops below the last defined col class it starts to look like this):

As you can see, once I scale the width of the browser down, it just snaps the height of the card to the second image.

Is it possible to resize the card in the second picture to fill the height, without messing around with the heights of the other cols? Adding "min-height: 200px;" will fix this issue, but it will also mess with the other col widths and make them appear stretchy.

Sorry if that's a basic question. I found a few posts but I couldn't fix it at all and normally backend, just trying to understand Bootstrap better.

Answer 1

Using "background-size: contain" will make it so that your images don't stretch and are fully visible, but you are still stuck with setting a min-height, which won't mess with your col widths so you don't have to worry about that. Consider using an img tag instead of divs with backgrounds though as they will size based on the image, whereas the image sizes itself with the div when you use divs w/ backgrounds

Cheers, Ethan

Answer 2

So i came up with a solution, thanks everyone for your input. Just in case someone else runs into this problem:

Heres the working solution:

<div class="card h-100">

  <%= image_tag(post.images.first, class: 
 'img-responsive', style: "width: 100%; height: 
  100%;")%>
</div>

I tried this before, but the cards were unequally in the height and the images were not really full width/height. The key is here to set the card to h-100 so that the card height is equally. Then, stretch the image in width&height too 100% and use img-responsive . This way, the image scales nicely together with all col widths.

Greetings!