17

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

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

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

我试过

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

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

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

4

4 回答 4

34

就像@Yosep 说的那样，这里的轨道没有什么神奇之处。<%= image_tag %>在结果 html 中生成一个<img>标签。如果你通过 a :size => '260x180'，结果<img>标签将有它的width和height设置为 260 和 180。

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

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

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

于 2012-05-05T04:25:08.667 回答
6

当看到你的代码时，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-05T02:26:20.060 回答
3

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

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

这篇博文介绍了如何使用 CarrierWave，同时所有图像都存储在云中，通过快速 CDN 交付，所有转换都在云中动态完成（无需安装 RMagick）。

于 2012-05-06T15:20:23.057 回答
1

在视图中，无需处理新图像？按照惯例，您将使用 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-05T02:25:55.307 回答