how to replace the number with the “image width” in vote page

Question

<form action="/votes/vote" method="post">
  <% for option in @vote.options %>
    <%= option.name %>
    <%= option.quantity %>
    <input type="checkbox" name="op[]" value="<%= option.id %>" /><br />
  <% end %>

  <input type="hidden" value="<%= @vote.id %>" name="id"/>
  <input type="submit" value="Submit" />
</form>

<%= option.quantity%> is the number of the vote; I want to replace it with an image more visual. How?

option1.quantity=15; =>: =====15px(columnar image)======

option1.quantity=30; =>: =============30px(columnar image)===============

Answer 1

I don't know if I understand your question, but if you want something "more visual", what about creating DIV like a color bar:

%div{:style => "background-color: green; height: 20px; width: #{option.quantity}px;"}
  = option.quantity

you can replace color with some background columnar image of course:

%div{:style => "background-image: url('some_columnar_image_path'); height: 20px; width: #{option.quantity}px;"}