Bootstrap 4-卡片背景图像尺寸调整问题

Question

因此，目前我正在使用Bootstrap的网格系统和一张简单的卡。在卡片中，我动态渲染背景图像。想想Instagram的网格系统。一切工作正常，除了一旦我达到定义的列宽以下，卡片就将其调整为原始高度的10％，并且图像几乎不可见。

<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：一切正常，但例外：

在col-sm-4下面（或md，没关系，一旦它降到最后定义的col类以下，它就会开始看起来像这样）：

如您所见，一旦我缩小了浏览器的宽度，它就将卡的高度对齐到第二张图像。

是否可以在第二张图片中调整卡片的大小以填充高度，而不会弄乱其他列的高度？添加"min-height: 200px;"将解决此问题，但同时也会使其他col宽度变得混乱，并使它们显得有弹性。

抱歉，这是一个基本问题。我发现了一些帖子，但是我根本无法修复它，而且通常在后端也无法解决，只是试图更好地理解Bootstrap。

Answer 1

使用“ background-size：contain”将使它不会拉伸并完全可见，但是您仍然会设置最小高度，而不会影响您的col宽度，因此您不必担心。考虑使用img标签而不是带有背景的div，因为它们会根据图片调整大小，而当您使用带有背景的div时，图片本身会通过div调整大小

干杯， 伊桑

Answer 2

所以我想出了一个解决方案，谢谢大家的投入。以防万一有人遇到这个问题：

这里提供了可行的解决方案：

<div class="card h-100">

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

我以前尝试过这种方法，但是卡片的高度不均，图像的宽度/高度并不是真的。关键是在此处将卡设置为 h-100 ，以使卡高度相等。然后，将图像的宽度和高度也拉伸100％，然后使用img-responsive。这样，图像可以与所有col宽度一起很好地缩放。

问候！