좋은 느낌으로 이미지를 리사이즈해 주는 React Component 를 만들어 보았다

이런 식으로 이미지의 종횡비를 바꾸지 않고 지정한 크기로 리사이즈하는 React Component를 만들었습니다.


가로 이미지의 경우
세로 이미지의 경우






이미지의 긴 변을 프레임에 맞추어 종횡비를 바꾸지 않고 이미지 전체가 프레임 내에 들어가도록 리사이즈 하는 것입니다.

화상의 종횡비를 유지한 채의 리사이즈는 object-fit 이나 backgound-size 에서도 가능합니다만,
IE에서 지원하지 않거나 배경 이미지에서만 사용할 수 있으므로 자작했습니다.

github : htps : // 기주 b. 코 m / 소 r / Rea ct

github README 에도 있습니다만, 사용법은 간단하고 이미지의 패스와 리사이즈 후의 width , height이미지를 얻을 수 없었던 경우(주로 404를 상정)용의 이미지 패스 noImageSrc 혹은, 이미지에 style 를 props 로 지정할 수 있도록 합니다.

제품에서도 사용하고, 좋은 느낌으로 움직여주고 있습니다.

원한다면 사용해보십시오.
요망이나 버그라든지 언제라도 기다리고 있습니다.

npm module도 처음 공개했습니다.
이 페이지를 참고로 생각했던 것보다 쉽게 ​​공개할 수 있었습니다.

github : htps : // 기주 b. 코 m / 소 r / Rea ct
npm : h tps : // 바디. 후 ry. 이오 / js / 레아 ct