如何在rails中将css添加到simple_form_for答案

【问题标题】：How can I Add css to siple_form_for in rails如何在rails中将css添加到simple_form_for
【发布时间】：2017-04-10 19:27:30
【问题描述】：

如何将 CSS 类添加到 simple_form_for 集合字段

<%= f.input :answer, as: :radio_buttons, :required => true, :label => false, collection: ([[image_tag(q.optiona),'a'] , [image_tag(q.optionb),'b'], [image_tag(q.optionc),'c'], [image_tag(q.optiond), 'd']]), wrapper: :vertical_radio_and_checkboxes, :input_html => {:class => "img img-thumbnail", :width => 304, :height => 236} %>

以上代码以实际大小显示图像，我想以缩略图显示图像。
提前致谢。

【问题讨论】：

你能发布你得到的 HTML 和你想要的 HTML 吗？顺便说一句，simple_form 本身已经添加了很多类......所以也许你不需要任何新类。让我们知道您是否想要将类添加到集合容器中，或者只是最终结果:)
图片正在显示，但尺寸非常大（它的实际尺寸），我想显示非常小的尺寸，例如 200X200。

标签： html css ruby-on-rails forms simple-form-for

【解决方案1】：

最好在网络上对图像进行预处理，而不是简单地使用 css 或图像属性缩小图像。如果你只有 4 张图片，我会打开像 gimp 这样的编辑器（一个免费的开源 Photoshop 替代品）。如果您正在处理用户上传的图像，请使用像 paperclip 这样的 gem，它允许您创建特殊的上传器，使用名为 imagemagick 的命令行工具可以自动将图像调整到合理的大小。但是，您可能想要使用双倍甚至三倍大小的图像的一个原因是现在的视网膜显示器。

回到您的代码。先简化代码：

<%= f.input :answer, as: :radio_buttons, :required => true, collection: ([[image_tag(q.optiona),'a'] , [image_tag(q.optionb),'b'], [image_tag(q.optionc),'c'], [image_tag(q.optiond), 'd']]) %>

即使没有特殊的包装器，以下 CSS 代码也会为您提供帮助：

.input.radio_buttons .radio img {
    width: 200px;
    height: 200px;
}

最后一句话：你没有为你的图片提供任何 alt 文本，虽然 image_tag-helper 会根据文件名为你添加一个生成的 alt 标签，但建议添加一个写得很好的标签以防有人看不到标签图像（好吧）。 :)

【讨论】：