Rails回形针图像大小取决于设备大小

Question

我在rails应用程序中使用paperclip来上传图像。 可以选择调整图像大小。

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中的参数和Imgix对它进行了分类。您还可以应用一系列动态效果，如裁剪图像，改变色彩平衡等。唯一的缺点是需要花钱，但根据您的使用情况，这可能非常划算。

无论哪种方式，您都需要告诉浏览器使用正确尺寸的图像。我建议使用srcset来执行此操作，但IE仍然不支持它。在此期间，This polyfill是一个不错的选择。