Rails图像在视图显示上调整大小？

如何调整现有图像的大小，例如“260x180？”Rails图像在视图显示上调整大小？

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

现在，我知道我可以创建另一个版本，以便创建三个版本，包括260x180，但是我觉得这样做是过度阻塞存储数据库，并且我在想我是否可以在视图级别。

我试图

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

但似乎它不工作 - 该图像是不相同的尺寸。

此外，如果图像比我想要的输出小，我是否需要做一些不同于比较大的图像？例如，我是否需要削减较大的，但扩大较小的，还是会自动缩放到所需的大小？

来源

2012-05-05 kibaekr

像@Yosep说，没有什么神奇的轨道会在这里的。 <%= image_tag %>在结果html中生成一个<img>标记。如果你传递一个:size => '260x180'，结果<img>标签都会有width和height设置为260和180

这里来为你的问题的答案。提供其他图像大小的最佳方式就是您在开始时拒绝的方式。您需要调整后端的图像大小并将其存储在某个位置。

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

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

来源

2012-05-05 04:25:08 nil

谢谢！不幸的是，我不能投票，因为我缺乏声望点......（跛脚）所以，这引发了我的另一个问题，我将如何使用一个上传多个模型，而无需调整不必要的照片。（http://stackoverflow.com/questions/10458324/carrierwave-single-uploader-for-multiple-models） – kibaekr

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

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

这里有一些有趣的方式与CSS裁剪：http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

来源

2012-05-05 02:25:55

这是否假设我有一个名为“image_container”的类在我的视图中包裹了图像标记？ – kibaekr

所有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; 
}

来源

2012-05-05 02:26:20

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

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

这blog post介绍如何使用CarrierWave而所有图像都存储在云中，通过快速提供CDN和所有变革都在云中（无需安装RMagick）动态地进行。

来源

2012-05-06 15:20:23 Cloudinary

Rails图像在视图显示上调整大小？

回答

相关问题