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

Question

如何调整现有图像的大小,比如"260x180？"

我目前正在使用Carrierwave和Rmagick将图像上传到我的Amazon S3存储桶,它创建了2个版本的图像:原始版本和拇指版本(70x70).

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

我试过了

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

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

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

Answer 1

就像@Yosep所说,这里没有任何神奇的铁轨.在结果html中<%= image_tag %>生成一个<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;
}