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圖像在視圖顯示上調整大小？

回答

相關問題