Border Radius Fix

[lucasartsfr]

Hello,

data-rmiz-modal-content has an <img> with CSS transform property (example: transform: translate(0px, 0px) scale(0.374583);)

When applying the same border-radius of the original image to the image that will be zoomed, the result is not good. Indeed, given that the transform Scale is not at 1, the radius is not good, and there is a transition that is not smooth. It would be necessary to divide the border-radius value by the scale value of the image to have the same render and a smooth transition.

Have you ever had this problem and/or a solution to solve it?

Thansk Again for this amazing module !

[rpearce]

@lucasartsfr Can you 🙏 provide a simple example of this for me to play with so I can better understand?

[rpearce]

I forgot about this because I didn't make an issue. Here we go: #405

[rpearce]

I've got a simple, working solution, but this is one of those things I need to think about a little more, for people may not want to keep the border radius for the zoomed state.

It feels like it only makes sense for regular <img /> elements and not <div>s with background images, nor <img /> elements with object-fit.

API-wise, it feels like this may need to be a user-defined option 🤔 . I'll think on it some more, but let me know what you think if you can.

[lucasartsfr]

Hey ! I did not try with Div, just IMG so I don't know what could be the problem with div ?

[rpearce]

DIVs that use background-size and IMG elements that use object-fit have their content stretched or shrank within the element based on the values. If you have cover as an option, the image will be stretched to cover the element.

The way this library works with those is that it does maths to figure out the "actual" rendered dimensions of the image, and then it does its zooming based on that.

A good example: you have a source image that is 16:9, but your DIV is 4:3 (or dynamic and changes!). When you first see the DIV, parts of the image are cut off, but when you zoom, you get the entire, original image, and the animation for that just works--it looks like your entire photo is revealed, and then it moves to the center of the screen.

👆 with this scenario, the original shape is not maintained, for the image was previously constrained, and so the added border-radius makes it look a little different.

---

Wow that was a lot to type!

Maybe it doesn't matter, and people can choose? If an option is provided from a user, then it doesn't matter if it's an IMG or DIV--the person specified what they wanted.

[rpearce]

Are there things similar to border-radius that you can think of that someone might also want to be copied to the zoom image and scaled?

p.s. Here is it working for a regular image (I think)

Screen.Recording.2023-04-26.at.10.03.17.PM.mov

[lucasartsfr]

Hum.. nothing in my mind. I think we need to test to figure out what could be affected by the scale effect Le jeu. 27 avr. 2023 à 03:55, Robert Pearce ***@***.***> a écrit :

…

Are there things similar to border-radius that you can think of that someone might also want to be copied to the zoom image and scaled? — Reply to this email directly, view it on GitHub <#395 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGMTZG5HFF76NJYKJ7ARRSDXDHG2FANCNFSM6AAAAAAUE67HYY> . You are receiving this because you were mentioned.Message ID: <rpearce/react-medium-image-zoom/repo-discussions/395/comments/5737626@ github.com>

[rpearce]

Ok. I'll think about a way to add this to the prop API and put a beta release out there within the next few days if I can. Thanks!

[rpearce]

@lucasartsfr can you try [email protected]? Here is the draft pull request for it: #417

In short, there is a new option, zoomUseBorderRadius, that would be used like

<Zoom zoomUseBorderRadius={true}>

[lucasartsfr]

Hey Robert ! I'll Check that asap, I don't have many time for the moment, I am sorry, Le ven. 28 avr. 2023 à 05:02, Robert Pearce ***@***.***> a écrit :

…

@lucasartsfr <https://github.com/lucasartsfr> can you try ***@***.***? Here is the draft pull request for it: #417 <#417> — Reply to this email directly, view it on GitHub <#395 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGMTZG2NDK3PSHHABVKU553XDMXMTANCNFSM6AAAAAAUE67HYY> . You are receiving this because you were mentioned.Message ID: <rpearce/react-medium-image-zoom/repo-discussions/395/comments/5749567@ github.com>

[rpearce]

No problem, this will be here for you to evaluate when you're ready.

p.s. Your nature photos are beautiful!

[rpearce]

Given there's been no movement from the requester for some time, and I'm not 100% on the feature, I closed the issue for now (#405).

[lucasartsfr]

Hi ! I am sorry, I really don't have time for this at the moment ! Thank you, Le dim. 12 nov. 2023 à 15:31, Robert Pearce ***@***.***> a écrit :

…

Given there's been no movement from the requester for some time, and I'm not 100% on the feature, I closed the issue for now (#405 <#405>). — Reply to this email directly, view it on GitHub <#395 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGMTZG7SCG3A45K7USLKSZTYEDMUZAVCNFSM6AAAAAAUE67HY2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM3TKNBWGI2DO> . You are receiving this because you were mentioned.Message ID: <rpearce/react-medium-image-zoom/repo-discussions/395/comments/7546247@ github.com>