導軌回形針圖像大小取決於設備大小

Question

我在我的導軌應用程序中使用回形針上傳圖像。 有選項可以調整圖像大小。

has_attached_file :photo, styles: {large: '1000x1000>', medium: '500x500>'} 

是否有可能採取大型設備，如iPad或大型全屏設備的圖像和移動設備的中型圖像？

我執行圖像那樣：

<div class="teaser" style="background: url(<%=@object.photo_url %>)"></div> 

Answer 1

您有這兩個選項：

1. 創建時將圖像保存，並在HTML中引用它們多種尺寸
2. 將其保存爲最大尺寸並根據需要調整其大小

對於選項1，您可以使用回形針設置中的dynamic styles option。

說了這麼多，我推薦選項2.我現在的僱主使用Imgix，這對我們來說是一個非常好的選擇。您上傳您擁有的最大圖像到S3，然後使用GET參數控制其大小。 httsp://yours3bucket.imgix.com/yourfolder/yourimage.png?width=205&height=354&hue=158如果您改變主意想要的分辨率，您不需要以不同的大小重新生成它們，這具有面向未來的巨大優勢，您只需更改HTML中的參數並將其整理即可。您還可以應用一些動態效果，例如裁剪圖像，改變色彩平衡等。唯一不利的地方是它需要花費金錢，但根據您的使用情況，這可能非常具有成本效益。

無論哪種方式，您都需要告訴瀏覽器使用正確尺寸的圖像。我建議使用srcset來做到這一點，儘管IE仍然不支持它。與此同時，This polyfill是一個不錯的選擇。