2014-09-03 1 views
0

다른 종횡비와 크기의 축소판 제품 이미지가 있습니다. 판매자가 다양한 크기의 이미지를로드 할 수 있도록하는 마켓 플레이스 앱입니다. 내가 가지고있는 200x200 축소판 그리드에 맞게 크기를 조정하려고합니다. 레일 4 난Rails 4 - Imagemagick 공간을 채우기 위해 크기 조정

, IM의 이전 버전을 기반으로 종이 클립 4.1있는 Imagemagick 6.8.9

, 이것은 내가 원하는 효과 - 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 플러그인을 시도했지만 의도 한대로 작동하지 않았다.

+0

크기가 조정 된 200x200 #을 사용하여 더 긴 가장자리를 자르고 이전 비율을 깨지 않고 새 비율에 도달합니다. –

답변

1

이것은 효과가 있습니다. 모든 중간 이미지는 200x200 크기로 맞습니다. 크기가 조정 된 이미지의 크기가 150x200 인 경우 이미지의 가운데 맞춤이 지정되고 상단 및 하단의 25 픽셀은 공백으로 채워집니다.

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