こんな感じで画像の縦横比を変えずに指定したサイズにリサイズする React Component を作りました。
| 横長画像の場合 | 縦長画像の場合 |
|---|---|
 |
 |
画像の長辺を枠に合わせ縦横比を変えずに画像全体が枠内に収まるようにリサイズするものです。
画像の縦横比を保ったままのリサイズは object-fit や backgound-size でも可能ですが、
IE で対応してなかったり背景画像でしか使用できないので自作しました
github: https://github.com/sottar/react-image-resizer
github の README にもありますが、使い方は簡単で画像のパスとリサイズ後の width, height を指定するだけでリサイズされたの画像を返してくれます。
画像取得できなかった場合（主に404を想定）用の画像パス noImageSrc や、画像にstyle を props で指定できるようにしてます。
プロダクトでも使用していて、いい感じで動いてくれてます。
よかったら使ってみてください。
要望とかバグとかいつでもお待ちしております。
npm の module も初めて公開しました。
このページを参考に思っていたよりも簡単に公開できました。
github: https://github.com/sottar/react-image-resizer
npm: https://badge.fury.io/js/react-image-resizer