如何将image_tag与bootstrap类一起使用:"img-responsive"？第11章

Question

我问这个问题的原因是为了帮助我解决一个非常烦人的语法错误.我正在使用第11章,因此我可以在我的新网站上使用图像构建一个博客部分,当我尝试添加类时,一切都有效:"img-responsive"到这一行.

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

我只是无法弄清楚添加类的正确语法:"img-responsive".

图像上传很好,但它突破了col-md-6容器,并显示打破页面布局的完整图像,因此除了我尝试添加类时,它们都在本地工作:括号中的"img-responsive"或括号,我尝试的每一种方式都会崩溃应用程序,所以我被困住了.我已经四处寻找其他解决方案,我发现了一个与carrierwave配合使用的宝石......

响应图像宝石

但这似乎就像用大锤敲打坚果一样,到目前为止我已经想到的所有其他问题,但这真的很烦人.我找不到适合响应图像的载波调整大小的任何东西,当然我可以使用img-responsive类？

关心肖恩

Answer 1

尝试将标记放在括号内

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

Answer 2

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

尝试：

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