如何将 css 添加到 rails 中的 siple_form_for

Question

如何将 CSS class 添加到 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 (a free and opensource Photoshop alternative). If you're working with user uploaded images use a gem like paperclip which allows you to create special uploaders that, using a command line tool called 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 会根据文件名为您添加生成的替代标签，但建议添加写得很好，以防万一有人看不到标签图像（嗯）。 :)

如何将 css 添加到 rails 中的 siple_form_for

How can I Add css to siple_form_for in rails

html

css

forms

ruby-on-rails

simple-form-for