图像没有调整大小 - 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 db中的字段。图像显示正常，但我无法在移动设备上查看时正确调整大小。

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

Answer 1

.img-fluid类使用父级全宽：

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

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

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

Answer 2

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