はじめに
投稿した画像がどうしても横に表示されてしまう、という仕様の修正にだいぶ苦労したので、画像のリサイズ方法についてまとめておきます。
主なメソッドは以下です。
これだけ知っておけばなんとかなると思います。
・resize_to_fit
・resize_to_limit
・resize_to_fill
resize_to_fit(width, height)
基本となるメソッドです。
画像の縦横比を維持したまま、 width を最大 300px、height を最大 200 pxにリサイズ。
process resize_to_fit: [300, 200]
resize_to_limit(width, height)
上のresize_to_fitと「ほぼ同じ」です。
画像の縦横比を維持したまま width を最大 300px、height を最大 200 pxにリサイズ。
process resize_to_limit: [300, 200]
resize_to_fitとの違いは、対象の画像のサイズが引数に指定された縦横サイズ以内の場合はリサイズしません。
例えばこの場合だと、元の画像サイズが [200, 150] だった場合は、リサイズせずにそのまま表示されます。
また、
リサイズ後のファイルの余白部分を指定色でぬりつぶすこともできます。
第三引数で塗りつぶしの色を指定(#ffffff)し、第四引数で余白が発生した際の画像の配置を指定(center)。
process resize_to_limit: [300, 200, "#ffffff", "Center"]
resize_to_fill(width, height, gravity)
上の２つと違い、縦横比を維持しません。
元画像から width 100px, height 100px で切り抜きを行い、第三引数で切り抜きを行う際の中心点を指定します。
process resize_to_fill: [100, 100, "Center"]
画像の端っこが一部切れてしまうこともありますが、
投稿した画像サイズがバラバラでも全て同じサイズにリサイズされ、縦横比の調整によって画像が横に表示されることも無いので、
画像投稿一覧を表示させるにはこのresize_to_fillが相性が良いと思います。
参考
Rails gem MiniMagick を利用して画像ファイルをリサイズする
CarrierWave + RMagick 画像のリサイズをまとめてみました
【rails】cloud9上で投稿画像のサイズを指定する【miniMagick】
Active StorageのVariantの指定方法いろいろ（ActiveStorageの場合）