如何将 image_tag 与 bootstrap 类一起使用：“img-responsive”？第11章答案

【问题标题】：How to use the image_tag with bootstrap class: "img-responsive" ? Chapter 11如何将 image_tag 与 bootstrap 类一起使用：“img-responsive”？第11章
【发布时间】：2015-07-12 14:11:23
【问题描述】：

我问这个问题的原因是为了帮助我解决一个非常烦人的语法错误。我正在使用第 11 章，所以我可以在我的新网站上建立一个带有图像的博客部分，除了我尝试向这一行添加 class: "img-responsive" 时，一切都在工作。

<%= image_tag image_article.picture.url if image_article.picture? %>

我只是想不出添加类的正确语法：“img-responsive”。

图片上传正常，但它打破了 col-md-6 容器，并显示了打破页面布局的完整图片，所以除了我尝试添加类时，它都在本地工作：“img-responsive ” 在括号或括号中，我尝试的每一种方式都会使应用程序崩溃，所以我被卡住了。我四处寻找其他解决方案，我发现了一个可以与carrierwave一起使用的gem ...

responsive-images gem

但这似乎就像用大锤敲碎坚果一样，到目前为止我遇到的所有其他问题我都已经弄清楚了，但这真的很烦人。我找不到任何符合响应式图像要求的载波调整大小，我肯定可以使用 img-responsive 类吗？

问候肖恩

【问题讨论】：

标签： ruby-on-rails railstutorial.org

【解决方案1】：

尽量把标签放在括号内

<%=image_tag(image_article.picture.url, class: "img-responsive") if image_article.picture?%>

【讨论】：

感谢您的回复。不，它仍然会脱离 col-md-6 容器。
当您从浏览器检查检查元素时，它是否显示 class="img-responsive" ？
你应该问这个问题很有趣，因为我只是在看那个。不，class="img-responsive" 没有显示。话虽如此，响应式布局都在网站上运行，但没有应用类，这很奇怪。
我真的不确定它有什么不同，但我刚刚重新启动了服务器，现在一切正常。所以，我需要做的就是按照建议将标签放在括号内。重启服务器，然后宾果游戏。快乐的时光。谢谢各位

【解决方案2】：

Bootstrap 4 使用类：'img-fluid' 而不是 'img-responsive'

试试：

<%= image_tag image_article.picture.url, class: 'img-fluid' if image_article.picture? %>

【讨论】：

【解决方案3】：

试试这个..它对我有用.. 代替 xyz.png，在 Assets 文件夹中添加图像名称。

【讨论】：

【解决方案4】：

你试过了吗：

<%= image_tag image_article.picture.url, class: "img-responsive" if image_article.picture? %>

【讨论】：

感谢您的回复，是的，我确实尝试过，但它没有工作 :( 应用程序不会因此崩溃，但它仍然会脱离 col-md-6 容器，显示破坏页面布局的完整图像。
如果“img-responsive”不起作用并且您想将其放在某个特定容器下，您可以提供一个引导类。喜欢：
谢谢你，还是没有。
你能通过inspect元素看到这个元素上的这些类吗？
好像被忽略了