Rails 4 - Imagemagick Resize to fill space

问题

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.

I'm on Rails 4, Paperclip 4.1, Imagemagick 6.8.9

Based on an earlier version of IM, this is the effect I want - http://www.imagemagick.org/Usage/resize/#space_fill - fill blank space to fit a 200x200 grid. See the problem with alignment on my demo site here - mktdemo.herokuapp.com

My model code. I tried playing with some IM options but didn't get it to align as I wanted:

has_attached_file :image, 
                  :styles => { :medium => "200x200", :thumb => "100x100" },
                  :default_url => ""
                  :convert_options => {:medium => ???}

My html.erb with bootstrap's "thumbnail" class.

<div class="center">
  <div class="row">
    <% @listings.each do |listing| %>
    <div class="col-md-3 col-sm-3 col-xs-6">
        <div class="thumbnail" > 
           <%= link_to image_tag(listing.image.url(:medium), class: "img-responsive"), listing, data: { no_turbolink: true } %> 
        </div>
        <div class="caption">
            <h3><%= link_to listing.name.downcase.titleize, listing, data: { no_turbolink: true } %></h3>
            <p><%= number_to_currency(listing.price) %></p>
        </div> 
     </div>
    <% end %>
  </div>
 <p><%= will_paginate @listings, renderer: BootstrapPagination::Rails %></p>
</div>

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.

回答1:

This worked. All medium images fit in the 200x200 size. If the resized image is say 150x200, the image is centered and the 25px on top and bottom are filled with whitespace.

has_attached_file :image, 
                  :styles => { :medium => "200x200", :thumb => "100x100>" },
                  :default_url => "",
                  :convert_options => {:medium => '-background white -gravity center -extent 200x200'}

来源：https://stackoverflow.com/questions/25649334/rails-4-imagemagick-resize-to-fill-space

标签

ruby-on-rails

twitter-bootstrap

ImageMagick