After rotating image, it doesn't fit the parent

[ospfranco]

Hey! Great library, however I have an issue:

I have the image in it's full resolution, and I want it to fit it's parent, so I have:

<ExifOrientationImg
src={'foo'}
style={{maxWidth: '100%', maxHeight: '100%', display: 'block'}}
/>

so when I use the ExifOrientationImg component it gets correctly rotated, however the problem is that, after the rotation, it no longer adheres to the parent width and height, but overflows it completely... I could write some code to swap the values, except then I need to detect the orientation manually again, at which point I would no longer need this library.

The ideal solution would be the image swaps the values automatically or worst case scenario add a callback with the detected orientation so users can swap max values on their own.

Cheers!

[abel30567]

I was getting the same issue. I got the Y component to show by setting overflow: -webkit-paged-y on the parent. However it still needs to fit to the width of the parent component.

[makarkotlov]

It's because transformations applied to an element using transform CSS property happen after the layout has taken place. There is a trickery with CSS to solve that on StackOverflow, but it's hacky

[AndrewTruett]

Has any progress been made on this issue? I am currently also having this problem

[ospfranco]

the original issue is from 2018, you can consider this as won't be fixed, you can take a look here if you still want a hacky solution to your problem:

https://ospfranco.github.io/post/2019/08/27/react-rotating-image/

[rricard]

Hi all sorry, this project is not maintained anymore, I will archive it shortly. If someone wants to fork and take ownership of the package on npm, let me know. Thank you.

[AndrewTruett]

Thanks everyone. I actually solved this problem without the use of this project by using the CSS image-orientation: from-image;. It seems to be widely supported now.