Question

我有不同宽高比和大小的缩略图产品图片。这是一个市场应用程序，因此卖家将加载各种尺寸的图像。我想调整大小以使它们适合我所拥有的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带有bootstrap＆＃34;缩略图＆＃34;类。

<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插件，但它们也没有按预期工作。

Answer 1

这很有用。所有中等图像均适合200x200尺寸。如果调整大小的图像为150x200，则图像居中，顶部和底部的25px用空格填充。

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

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

1 个答案: