引导程序4-卡背景图像大小调整问题

所以目前我使用的是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;" 将解决这个问题,但它也会与其他列宽度混乱,使他们看起来有弹性。

如果这是一个基本问题,我很抱歉。我发现了一些帖子,但我无法修复它在所有和正常的后端,只是试图更好地理解引导。