PaperClip ruby​​ on rails上传时图像大小不一致

时间:2015-02-09 03:04:11

标签: css ruby-on-rails paperclip

我在rails上的ruby中使用PaperClip来处理模型的图像上传。除了对图像尺寸的处理不一致之外,它的效果很好。

见这个例子:

enter image description here

看看最右边的图片是如何比中间和左边的图片大?

我需要确定为什么会这样。

这是我的开发回形针配置:

#Paperclip storage locally and specify location of imagemagick
Paperclip.options[:command_path] = "/usr/local/bin/"
PAPERCLIP_STORAGE_OPTS = {
     :styles => { :thumb => '100x100#', :medium => '450x300>', :large => '600x400>'},
     :convert_options => { :all => '-quality 100' },
     :processor       => [ :cropper ]
   }
  # Raises error for missing translations
  # config.action_view.raise_on_missing_translations = true
end

我正在使用以下代码显示这些图像:

<div class="container">
<% count = 0 %>
<% results.each do |event| %>
<% if count == 3 %>
  <div class="row"></div>
<% end %>
<div class="col-xs-12 col-md-4">
<ul class="deals">
<li class="impression">
<%= link_to(event) do %>
<%= image_tag event.logo.url(:medium) %>
<div>
<h2><%= event.className %></h2>
<div><%= event.company_name %></div>
<table>
<tbody>
<tr>
<td>
<span>£<%= event.ppt %></span> 
£<%= event.ppc %></td>
<td>4 bought</td>
</tr>
</tbody>
</table>
</div>
<% end %>
</li>
</ul>
</div>
<% count = count +1 %>
<% end %>
</div>

当我在HTML渲染后调查实际的img大小时,它们如下:

网球照片:334 x 209(原始图像尺寸为1024 x 640)

计算机培训pic:334 x 209(原始图像尺寸为1600 x 1000)

Zumba pic:334 x 223(原始图像尺寸为1280 x 854)

出于某种原因,Zumba图片比其他图片长14个像素?!为什么会发生这种情况 - 为什么Paperclip在此配置中不能持续调整大小?或者它是否与页面的css有关?!

1 个答案:

答案 0 :(得分:0)

答案是忽略imagemagick中的宽高比:

http://www.imagemagick.org/Usage/resize/#noaspect

因此我将配置选项更改为:

#Paperclip storage locally and specify location of imagemagick
Paperclip.options[:command_path] = "/usr/local/bin/"
PAPERCLIP_STORAGE_OPTS = {
     :styles => { :thumb => '100x100!#', :medium => '450x300!>', :large => '600x400!>'},
     :convert_options => { :all => '-quality 100' },
     :processor       => [ :cropper ]
   }
  # Raises error for missing translations
  # config.action_view.raise_on_missing_translations = true
end

注意!在已经添加的'100x100!#'中 - 这是告诉imagemagick忽略宽高比的原因 - 这就是我添加之前我的图像尺寸不一致的原因!。

嗬。 ! 。