回形针:宽度为 100%,高度为宽度的 60%

Posted

技术标签:

【中文标题】回形针:宽度为 100%,高度为宽度的 60%【英文标题】:Paperclip: width is 100%, height is 60% of width 【发布时间】:2013-08-09 05:37:38 【问题描述】:

如何编写回形针样式以将上传图像的宽度保持为 100%,但仅将高度裁剪为宽度的 60%?

类似这样的:

has_attached_file :image, :styles =>  :cropped => "100%x[60% of height]" 

【问题讨论】:

【参考方案1】:
has_attached_file :image, :styles =>  
                      :original  => "100x60>",
                      :thumb => Proc.new  |instance| instance.resize 
                    
  #### End Paperclip ####

  def resize     
     geo = Paperclip::Geometry.from_file(image.to_file(:original))
     height = (geo.width.to_i * 60)/100
     width = geo.width     
     "#width.roundx#height.round!"    
  end  

希望对你有帮助

【讨论】:

我得到了NameErrorundefined local variable or method 'image'。尝试将image 更改为我用于图像名称的名称,仍然没有。有什么建议吗? 在新保存时,我需要使用main_image.queued_for_write[:original].path 作为参数。【参考方案2】:
has_attached_file :image, :styles => after_save :save_image_dimensions

def save_image_dimensions
  geo = Paperclip::Geometry.from_file(image.path)
  self.image_height = (geo.height.to_i * 60)/100 
end

如果您在提取维度上遇到问题,可以从下面获得很好的帮助

https://github.com/thoughtbot/paperclip/wiki/Extracting-image-dimensions

请查看此链接以使用回形针裁剪图像

http://viget.com/extend/manual-cropping-with-paperclip

谢谢

【讨论】:

以上是关于回形针:宽度为 100%,高度为宽度的 60%的主要内容,如果未能解决你的问题,请参考以下文章

获取浏览器视口的宽度和高度,无论内容大小如何且不调整为 100%?

css 高度为宽度的50%

如何将 iframe 高度和宽度设置为 100%

想要一个宽度/高度为 100% 的 iPhone / iPad / iOS 网页

CSS 背景图宽度100% 高度自适应

如何在本机反应中将图像宽度设置为 100% 并将高度设置为自动?