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