Question

在我的Rails 4应用中，我使用MetaInspector gem来删除用户提供的链接中的图片。

这样，我能够在我的观点中做到这样的事情：

<%= image_tag(@link.images.best) %>

并且效果很好。

现在，我想将这些图像调整大小/裁剪为450x246像素的特定尺寸，所以我尝试这样做：

<%= image_tag(@link.images.best, size: "450x246") %>

但此解决方案不会保留图像的初始比例。

只要我们不扭曲图像，我就可以“剪切”图像。

我发现this solution但它不适合我的用例：我不想将图像存储在我的数据库中，我只是想从URL中提取它们并在我的视图中显示它们。

如何直接在我的视图中“动态”调整/裁剪我的图像？

Answer 1

我想调整大小/裁剪这些图像尺寸为450x246px

您可以通过设置图片的max-width或max-height css属性来适应该维度的空间，无论哪种选项更适合您的使用案例。

<%= image_tag(@link.images.best, style: "max-width: 450px") %>

或

<%= image_tag(@link.images.best, style: "max-height: 246px") %>

如果您希望图像大小完全符合您指定的尺寸，则必须裁剪大图像并扩展较小的图像（同时保持纵横比），在这种情况下，您有多种方法可以做到这一点，所有这些都是已经answered here。

Answer 2

这是我最终做的事情：

#HTML
<div id="container" style="background-image:url(<%= @link.images.best %>);">
</div>

#CSS
#container {
    overflow: hidden;
    width: 445px;
    height: 246px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: cover;
    background-color: transparent;
}

无论原始图像的宽度或高度如何，这都非常有效。

Rails 4：从URL裁剪图像并保留比率

2 个答案: