Rails 4 - Imagemagick 调整大小以填充空间答案

【问题标题】：Rails 4 - Imagemagick Resize to fill spaceRails 4 - Imagemagick 调整大小以填充空间
【发布时间】：2014-10-28 06:00:11
【问题描述】：

我有不同纵横比和尺寸的产品缩略图。这是一个市场应用程序，因此卖家将加载各种尺寸的图像。我想调整大小以使其适合我拥有的 200x200 缩略图网格。

我在 Rails 4、Paperclip 4.1、Imagemagick 6.8.9 上

基于早期版本的 IM，这是我想要的效果 - http://www.imagemagick.org/Usage/resize/#space_fill - 填充空白以适应 200x200 网格。在我的演示站点上查看对齐问题 - mktdemo.herokuapp.com

我的型号代码。我尝试使用一些 IM 选项，但没有得到我想要的对齐：

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

我的 html.erb 带有引导程序的“缩略图”类。

<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>

我不想在 css 中使用固定的像素大小，因为它们没有响应性。我也尝试了一些 JS 插件，但它们也没有按预期工作。

【问题讨论】：

我会使用 200x200# 它调整大小然后裁剪较长的边缘，以在不破坏旧比例的情况下达到新比例

标签： ruby-on-rails twitter-bootstrap imagemagick

【解决方案1】：

这行得通。所有中等图像都适合 200x200 尺寸。如果调整后的图像是 150x200，则图像居中，顶部和底部的 25px 被空白填充。

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

【讨论】：