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;" 将解决此问题，但它也会与其他列宽度混淆并使它们看起来有弹性。

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

Answer 1

所以我想出了一个解决方案，感谢大家的意见。以防万一其他人遇到这个问题：

这是可行的解决方案：

<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 宽度一起缩放。

您好！

Answer 2

使用“背景尺寸：包含”可以使您的图像不会拉伸并且完全可见，但您仍然坚持设置最小高度，这不会弄乱您的 col 宽度，所以您不必担心。考虑使用 img 标签而不是带背景的 div，因为它们会根据图像调整大小，而当您使用带背景的 div 时，图像会根据 div 调整大小

干杯， 伊森