Rails画像の表示サイズを変更しますか？

Question

既存の画像のサイズを「260x180」に変更するにはどうすればよいですか？

私は現在、Amazon S3ストレージバケットに画像をアップロードするためにCarrierwaveとRmagickを使用しています。オリジナルとサムバージョン（70x70）の2つのバージョンの画像を作成します。

260x180を含めて3つのバージョンが作成されるように別のバージョンを作成できることはわかっていますが、ストレージデータベースが過度に詰まっていると感じました。ビューレベル。

私は

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

を試みたが、それは働いていないように思える - 画像は、同一のサイズではありません。

また、画像が希望の出力よりも小さい場合は、より大きな画像とは異なる処理をする必要がありますか？たとえば、大きなものを切り取る必要がありますが、小さいものを展開するか、自動的に目的のサイズに拡大しますか？

Answer 1

@Yosepがここで起こっレールの魔法のような何もない、言ったように：それは働いているようにあなたのコードを見ていない場合は、それにCSSクラスを割り当てよう、と述べた

。 <%= image_tag %>は結果HTMLに<img>タグを生成します。あなたが:size => '260x180'を渡すと、結果<img>タグは260と180

にそのwidthとheightセットを持っていますここにあなたの質問に対する答えが来ます。別の画像サイズを提供する最良の方法は、あなたが最初に拒否した方法です。これらのイメージをバックエンドでサイズ変更し、どこかに保存する必要があります。

幅と高さを<img>タグに設定してイメージのサイズを変更しても、イメージの元の縦横比は維持されません。元の比率が260：180の場合は問題ありません。しかし、そうでなければ、結果は醜いでしょう。さらに、そうすることのもう一つの欠点もあります。これは、CSSを使用してイメージのサイズを変更しないでください。大きな画像をクライアント側で小さくサイズ変更すると、最終的にはネットワークの浪費となり、サイトのレンダリングが遅くなります。これはYSlowのルールの1つです。

CSSを使用して画像のサイズを変更するには、max-widthとmax-heightを使用できます。大きい画像はそれに応じてサイズ変更され、小さいものはサイズ変更されません。

Answer 2

ビューでは、新しい画像を処理しませんか？大会では、CSSを使用します。

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

そして、ここでCSSをトリミングするには、いくつかの興味深い方法があります。http://cssglobe.com/post/6089/3-easy-and-fast-css-techniques-for-faux-image

Answer 3

あなたのコードを見ると、すべてのRailsは、

<image tag="image.jpg" width="260" height="190" ../> 

のようなものに

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

を有効にすることですんページ上の

（HTML）

.image-size { 
    max-width: 300px; 
    max-height: 200px; 
} 

Answer 4

欲しい場合は、クラウド内の自動画像リサイズを使用できます。たとえば、次のコマンドは、260x180の長方形を塗りつぶすようにイメージのサイズを変更します。

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

これblog postは、すべての画像は、クラウドに保存されている高速のCDNを通じて提供し、すべての変換が動的にクラウド（RMagickをインストールする必要はありません）で行われている間CarrierWaveを使用する方法について説明します。