时间戳

首页 > 解决方案 > Bootstrap 4 - 卡片背景图像调整大小问题

html - Bootstrap 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-md-4 示例

下面col-sm-4（或 md，并不重要，一旦它低于最后定义的 col 类，它开始看起来像这样）：

低于 col-md-4)

如您所见，一旦我缩小浏览器的宽度，它只会将卡片的高度捕捉到第二张图像。

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

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

标签： htmlcssbootstrap-4

解决方案

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

干杯，伊桑

推荐阅读