Question

如何将现有图像调整为“260x180？”

我目前正在使用Carrierwave和Rmagick将图像上传到我的Amazon S3存储桶，它创建了2个版本的图像：原始版本和拇指版本（70x70）。

现在，我知道我可以创建另一个版本，以便创建三个版本，包括260x180，但我觉得这样会过度堵塞存储数据库，我想知道我是否可以在视图上执行此操作水平。

我试过

<%= image_tag(@syllabus.image_url, :size => "260x180") %>

但似乎它不起作用 - 图像尺寸不同。

另外，如果图像小于我想要的输出，我是否需要做一些不同于更大图像的事情？例如，我是否需要切割较大的那些，但是扩展较小的那个，还是会自动缩放到所需的大小？

Answer 1

就像@Yosep所说，这里没有任何神奇的铁轨。 <%= image_tag %>在结果html中生成<img>标记。如果您传递:size => '260x180'，则结果<img>标记会将其width和height设置为260和180.

以下是您的问题的答案。提供另一种图像尺寸的最佳方式是您在开始时拒绝的方式。您需要在后端调整这些图像的大小并将它们存储在某个位置。

通过设置<img>标记的宽度和高度来调整图像大小不会保持图像的原始高宽比。如果原始比例是260：180，那就没关系。但如果没有，结果将是丑陋的。此外，这样做有另一个缺点，这也是你不应该使用CSS调整图像大小的原因。在客户端将大图像调整为较小的图像最终将极大地浪费您的网络，这样做会降低网站的渲染速度。这是YSlow的规则之一。

要使用CSS调整图片大小，您可以使用max-width和max-height，相应调整较大的图片大小，不会调整较小的图片大小。

Answer 2

所有Rails在看到您的代码时都会转向

<%= image_tag(@syllabus.image_url, :size => "260x180") %>

类似

<image tag="image.jpg" width="260" height="190" ../>

页面上的

（HTML）。

也就是说，如果您的代码看起来不起作用，请尝试为其分配一个CSS类：

.image-size {
  max-width: 300px;
  max-height: 200px;
}

Answer 3

如果您需要，可以在云中使用我们的自动图像大小调整。例如，以下命令将调整图像大小以填充260x180矩形。

<%= cl_image_tag("my_image.png", :size => "260x180", :crop => :fill) %>

此blog post描述了如何使用CarrierWave，而所有图像都存储在云中，通过快速CDN传送，所有转换都在云中动态完成（无需安装RMagick）。

Answer 4

在视图中，没有处理新图像？按照惯例，你使用CSS。

.image_container img {
  width: 260px;
  height: 180px
}

以下是使用CSS裁剪的一些有趣方法：http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Rails图像重新调整视图显示大小？

4 个答案: