html - 如何在 Rails 中将 css 添加到 simple_form_for

Question

如何将 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} %>  

上面的代码是以实际大小显示图像，我想以缩略图显示图像。

Answer 1

最好对网络上的图像进行预处理，而不是简单地使用 css 或图像属性缩小图像。如果你只有 4 张图片，我会打开一个像 gimp 这样的编辑器(免费和开源的 Photoshop 替代品)。如果您正在处理用户上传的图像，请使用像 paperclip 这样的 gem它允许您创建特殊的 uploader ，使用名为 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;
}

最后的评论:你没有为你的图像提供任何替代文本，虽然 image_tag-helper 会根据文件名为你添加一个生成的 alt 标签，但建议添加写得很好，以防万一有人看不到标签图像(嗯)。 :)