我怎樣才能添加CSS來siple_form_for在軌

如何添加CSS類simple_form_for收藏領域我怎樣才能添加CSS來siple_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} %>

上面的代碼在其實際大小顯示圖像，我想顯示縮略圖圖像。
在此先感謝。

來源

2017-04-10 khalidh

你可以發佈你獲得的HTML和HTML後？順便說一句，大量的類已經被simple_form本身添加了...所以也許你不需要任何新的類。讓我們知道，如果你是在添加一個類到收集容器的技巧之後，或者只是最終結果:) – murb

圖像顯示但尺寸非常大（其實際尺寸），我想顯示非常小的尺寸，如200X200 。 – khalidh

最好是預先處理網絡上的圖像，而不是簡單地用css或圖像屬性縮小圖像。如果你只有4張圖片，我會打開一個編輯器，如gimp（一個免費的和開源的Photoshop替代品）。如果您使用的是用戶上傳的圖片，請使用像paperclip這樣的寶石，它允許您創建特殊的上傳程序，使用稱爲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-10 20:14:42 murb

我怎樣才能添加CSS來siple_form_for在軌

回答

相關問題