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

How to use the image_tag with bootstrap class: "img-responsive" ? Chapter 11

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

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

我只是想不出要添加的正确语法 class:"img-responsive".

图像上传正常,但它脱离了 col-md-6 容器,并显示了破坏页面布局的完整图像,因此除了我尝试添加 class:括号或括号中的“img-responsive”,我尝试的每一种方式都会使应用程序崩溃,所以我被卡住了。我四处寻找其他解决方案,我找到了一个 gem 与载波一起工作的...

responsive-images gem

但这就像用大锤敲螺母一样,到目前为止我遇到的所有其他问题都已经解决了,但这真的很烦人。我找不到任何符合响应图像要求的载波调整大小的东西,当然我可以使用 img-responsive class?

问候 肖恩

你试过这个吗:

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

尽量给括号内的标签

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

试试这个..它对我有用.. 代替 xyz.png,添加资产文件夹中的图像名称。

<%= image_tag("xyz.png", class: "img-responsive img-thumbnail img-circle") %>

Bootstrap 4 使用 class: 'img-fluid' 而不是 'img-responsive'

尝试:

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