Help us understand the problem. What is going on with this article?

いい感じに画像をリサイズしてくれる React Component を作ってみた

More than 3 years have passed since last update.

こんな感じで画像の縦横比を変えずに指定したサイズにリサイズする React Component を作りました。

横長画像の場合 縦長画像の場合
horizontally.png vertically.png

画像の長辺を枠に合わせ縦横比を変えずに画像全体が枠内に収まるようにリサイズするものです。

画像の縦横比を保ったままのリサイズは object-fitbackgound-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

sottar
caddi
製造業の受発注プラットフォーム「CADDi」を提供しています。 モノづくりに携わるすべての人が、本来持っている力を最大限に発揮できる社会を実現する。産業の常識を変える「新たな仕組み」をつくります。 「CADDi」は金属加工品のCAD・設計図の解析から複雑な物流を表現するUIまで幅広い開発をしており、常に開発環境に最新の技術をとり入れて、より良いプロダクトを作るように心がけております。
https://corp.caddi.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away