Rails 4：來自URL的裁剪圖像和保留比例

在我的Rails 4應用程序中，我使用MetaInspector gem從用戶提供的鏈接中截取圖像。Rails 4：來自URL的裁剪圖像和保留比例

這種方式，我能夠在我的意見做這樣的事情的：

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

，它工作得很好。現在

，我想調整大小/作物這些圖片450x246px的特定維度的話，我試着這樣做：

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

但這種方法不保留圖像的初始比例。

只要我們不扭曲它們，我就可以「切割」圖像。

我發現this solution但它不適合我的用例：我不想將圖像存儲在我的數據庫中，我只是想從URL中提取它們並將它們顯示在我的視圖中。

如何在我的視圖中直接調整/裁剪我的圖像？

來源

2015-11-14 Thibaud Clement

這裏是我落得這樣做：

#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; 
}

這個作品真的很好，無論是寬度還是原始圖像的高度。

來源

2015-11-15 00:22:51

但是保存寬高比？ –

是的，因爲圖像被用作背景。 –

我想調整大小/作物這些圖片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。

來源

2015-11-14 21:01:52

Rails 4：來自URL的裁剪圖像和保留比例

回答

相關問題