Rails圖像重新調整視圖顯示大小？

Question

如何調整現有圖像的大小，比如“260x180？”

我目前正在使用Carrierwave和Rmagick將圖像上傳到我的Amazon S3存儲桶，它創建了2個版本的圖像：原始版本和拇指版本（70x70）。

現在，我知道我可以創建另一個版本，以便創建三個版本，包括260x180，但我覺得這樣會過度堵塞存儲數據庫，我想知道我是否可以在視圖級別上執行此操作。

我試過了

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

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

此外，如果圖像小於我想要的輸出，我是否需要做一些與更大的圖像不同的東西？ 例如，我是否需要切割較大的那些，但是擴展較小的那個，還是會自動縮放到所需的大小？

Answer 1

就像@Yosep所說，這里沒有任何神奇的鐵軌。 <%= image_tag %>在結果html中生成<img>標記。 如果你傳遞:size => '260x180' ，結果<img>標簽的width和height將設置為260和180。

這是你的問題的答案。 提供另一種圖像尺寸的最佳方式是您在開始時拒絕的方式。 您需要在后端調整這些圖像的大小並將它們存儲在某個位置。

通過設置<img>標簽的寬度和高度來調整圖像大小不會保持圖像的原始高寬比。 如果原始比例是260：180，那就沒關系。 但如果沒有，結果將是丑陋的。 此外，這樣做有另一個缺點，這也是你不應該使用CSS調整圖像大小的原因。 在客戶端將大圖像調整為較小的圖像最終將極大地浪費您的網絡，這樣做會降低網站的渲染速度。 這是YSlow的規則之一。

要使用CSS調整圖像大小，可以使用max-width和max-height ，較大的圖像將相應調整大小，較小的圖像將不會調整大小。

Answer 2

當看到你的代碼時，所有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;
}

Answer 3

如果您願意，可以在雲中使用我們的自動圖像大小調整。 例如，以下命令將調整圖像大小以填充260x180矩形。

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

此博客文章描述了如何使用CarrierWave，而所有圖像都存儲在雲中，通過快速CDN傳遞，所有轉換都在雲中動態完成（無需安裝RMagick）。

Answer 4

在視圖中，沒有處理新圖像？ 按照慣例，你使用CSS。

.image_container img {
  width: 260px;
  height: 180px
}

以下是使用CSS進行裁剪的一些有趣方法： http ： //cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image