title: Rails 4 - Imagemagick Resize to fill space
body: <p>I have thumbnail product images that are in different aspect ratios and sizes. This is a marketplace app so sellers will load images in various sizes. I want to resize to make them fit within the 200x200 thumbnail grid that I have.</p>
  
  <p>I'm on Rails 4, Paperclip 4.1, Imagemagick 6.8.9</p>
  
  <p>Based on an earlier version of IM, this is the effect I want - <a href="http://www.imagemagick.org/Usage/resize/#space_fill" rel="nofollow">http://www.imagemagick.org/Usage/resize/#space_fill</a> - fill blank space to fit a 200x200 grid. See the problem with alignment on my demo site here - <a href="http://mktdemo.herokuapp.com" rel="nofollow">mktdemo.herokuapp.com</a></p>
  
  <p>My model code. I tried playing with some IM options but didn't get it to align as I wanted:</p>
  
  <pre><code>has_attached_file :image, 
                    :styles =&gt; { :medium =&gt; "200x200", :thumb =&gt; "100x100" },
                    :default_url =&gt; ""
                    :convert_options =&gt; {:medium =&gt; ???}
  </code></pre>
  
  <p>My html.erb with bootstrap's "thumbnail" class.</p>
  
  <pre><code>&lt;div class="center"&gt;
    &lt;div class="row"&gt;
      &lt;% @listings.each do |listing| %&gt;
      &lt;div class="col-md-3 col-sm-3 col-xs-6"&gt;
          &lt;div class="thumbnail" &gt; 
             &lt;%= link_to image_tag(listing.image.url(:medium), class: "img-responsive"), listing, data: { no_turbolink: true } %&gt; 
          &lt;/div&gt;
          &lt;div class="caption"&gt;
              &lt;h3&gt;&lt;%= link_to listing.name.downcase.titleize, listing, data: { no_turbolink: true } %&gt;&lt;/h3&gt;
              &lt;p&gt;&lt;%= number_to_currency(listing.price) %&gt;&lt;/p&gt;
          &lt;/div&gt; 
       &lt;/div&gt;
      &lt;% end %&gt;
    &lt;/div&gt;
   &lt;p&gt;&lt;%= will_paginate @listings, renderer: BootstrapPagination::Rails %&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I don't want to use fixed pixel sizes in css because they are not responsive. I also tried some JS plugins but they didn't work as intended either. </p>