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

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是一个不错的选择。