0

How to add CSS class to simple_form_for collection fields

<%= 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} %>

The above code is displaying images in its actual size, I want show the images in thumbnails.
Thanks in advance.

4

1 回答 1

1

最好在网络上对图像进行预处理，而不是简单地用 css 或图像属性缩小图像。如果你只有 4 张图片，我会打开一个像gimp这样的编辑器（一个免费的开源 Photoshop 替代品）。如果您正在处理用户上传的图像，请使用像回形针这样的 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 标签，但建议添加一个写得很好的标签，以防有人看不到标签图像（很好）。:)

于 2017-04-10T20:14:42.553 回答