CSS 在视图显示上调整 Rails 图像大小？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10458216/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rails Image Re-sizing on View display?
提问by kibaekr
How do I resize an existing image to, say "260x180?"
如何将现有图像调整为“260x180”？
I am using Carrierwave and Rmagick currently to upload images to my Amazon S3 storage bucket, and it creates 2 versions of the image: the original, and the thumb version( 70x70).
我目前正在使用 Carrierwave 和 Rmagick 将图像上传到我的 Amazon S3 存储桶，它创建了图像的 2 个版本：原始版本和拇指版本（70x70）。
Now, I know that I can create another version so that three versions would be created, including the 260x180, but I felt like that was over-clogging the storage database, and I was wondering if I could do it on a view level.
现在，我知道我可以创建另一个版本，以便创建三个版本，包括 260x180，但我觉得这会过度堵塞存储数据库，我想知道我是否可以在视图级别上做到这一点。
I tried
我试过
<%= image_tag(@syllabus.image_url, :size => "260x180") %>
but it seems like it's not working - the images are not identical sizes.
但它似乎不起作用 - 图像大小不同。
Also, if the image is smaller than my desired output, do I need to do something different than to images that are bigger? For example, do I need to cut the bigger ones, but expand the smaller ones, or will it automatically scale to the desired size?
另外，如果图像小于我想要的输出，我是否需要做一些与更大的图像不同的事情？例如，我需要切割较大的，但扩展较小的，还是会自动缩放到所需的大小？
回答by nil
Like @Yosep said, there's nothing magical of rails going on here. <%= image_tag %>generates an <img>tag in the result html. if you pass a :size => '260x180', the result <img>tag will have its widthand heightset to 260 and 180.
就像@Yosep 所说的，这里的轨道没有什么神奇之处。在结果 html 中<%= image_tag %>生成一个<img>标签。如果你传递一个:size => '260x180'，结果<img>标签将拥有width并height设置为260和180。
Here comes the answer for your question. the best way of providing another image size, is the way you turned down at the beginning. You need to resize those images in the backend and store them somewhere.
你的问题的答案来了。提供另一种图像尺寸的最佳方式是您在开始时拒绝的方式。您需要在后端调整这些图像的大小并将它们存储在某个地方。
Resizing image by setting the width and height of <img>tag will not keep the image's original aspect ratio. if the original ratio is 260:180, then it's fine. But if not, the result will be ugly. Besides, there's another drawback of doing so, which is the same reason that you should not resize image using CSS also. Resizing large images into smaller ones at client side will eventually be a huge waste of your network, and doing so will slow your site's rendering. That's one of YSlow's rules.
通过设置<img>标签的宽度和高度来调整图像大小不会保持图像的原始纵横比。如果原始比例是 260:180，那就没问题了。但如果不这样做，结果将是丑陋的。此外，这样做还有另一个缺点，这与不应使用 CSS 调整图像大小的原因相同。在客户端将大图像调整为较小的图像最终会极大地浪费您的网络，并且这样做会减慢您网站的渲染速度。这是 YSlow 的规则之一。
To resize image using CSS, you can use max-widthand max-height, larger images will be resized accordingly, smaller ones will not be resized.
要使用 CSS 调整图像大小，您可以使用max-width和max-height，较大的图像将相应调整大小，较小的不会调整大小。
回答by Yosep Kim
All Rails does, when seeing your code, is to turn
所有 Rails 在看到你的代码时所做的就是转动
<%= image_tag(@syllabus.image_url, :size => "260x180") %>
into something like
变成类似的东西
<image tag="image.jpg" width="260" height="190" ../>
on the page (HTML).
在页面 (HTML) 上。
That said, if your code does not look like it's working, try to assign a CSS class to it:
也就是说，如果您的代码看起来不起作用，请尝试为其分配一个 CSS 类：
.image-size {
max-width: 300px;
max-height: 200px;
}
回答by Cloudinary
If you want you can use our automatic image resizing in the cloud. For example, the following command would resize the image to fill a 260x180 rectangle.
如果您愿意，可以使用我们在云中自动调整图像大小。例如，以下命令将调整图像大小以填充 260x180 矩形。
<%= cl_image_tag("my_image.png", :size => "260x180", :crop => :fill) %>
This blog postdescribes how to use CarrierWave while all images are stored in the cloud, delivered through a fast CDN and all transformations are dynamically done in the cloud (no need to install RMagick).
这篇博文描述了如何使用 CarrierWave，同时所有图像都存储在云中，通过快速 CDN 交付，并且所有转换都在云中动态完成（无需安装 RMagick）。
回答by Kyle Macey
In a view, without processing a new image? By convention, you'd use CSS.
在一个视图中，不处理新图像？按照惯例，您将使用 CSS。
.image_container img {
width: 260px;
height: 180px
}
And here are some interesting ways to crop with CSS: http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
这里有一些有趣的使用 CSS 裁剪的方法：http: //cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image
