Rails 4 - Imagemagick调整大小以填充空间 [英] Rails 4 - Imagemagick Resize to fill space

问题描述

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

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.

我在Rails 4，Paperclip 4.1，Imagemagick 6.8.9

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

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

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

我的型号代码。我尝试使用一些IM选项，但没有让它按照我想要的方式对齐：

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 => ???}

我的html.erb带有bootstrap的thumbnail类。

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>

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

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.

推荐答案

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

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

这篇关于Rails 4 - Imagemagick调整大小以填充空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！