图片未调整大小 - Bootstrap 4，Rails 5

Question

这让我有点发疯。我正在使用 bootstrap 4 class .img-fluid 这应该使图像响应父级； https://v4-alpha.getbootstrap.com/content/images/

<div class="img-fluid"><%= image_tag(@coffeeshop.image_path) %></div>

我正在使用 rails image_tag 来调用一个文件名路径，这是一个存储在我的 postgres 数据库中的字段。图像显示得很好，但在移动设备上查看时我无法正确调整大小。

用标准 html <img src="" /> 调用图像会有所不同吗？我当然需要更改我的数据库字段，但这是可行的。

Answer 1

您需要将 class 传递给图像本身，而不是包含它的 div。

Answer 2

.img-fluidclass使用parents全角：

.img-fluid {
  max-width: 100%;
  height: auto;
}

所以你必须添加 .img-fluid class 到图像本身：

<div>
  <%= image_tag(@coffeeshop.image_path, class: 'img-fluid') %>
</div>

Image not resizing - Bootstrap 4, Rails 5