[EuiImage] Using allowFullScreen on an image with a data URI source doesn't respect sizing

[cchaos]

When investigating #833 with this CSbox: https://codesandbox.io/s/v5rr7

I found that using allowFullScreen in conjunction with any explicit size prop gets ignored when supplying the source as a data-uri.

[kartikPatidar]

Isn't it supposed to receive url prop instead of src?

[cchaos]

Depends on if you are linking to an outside source or local resource you're displaying inline.

[elizabetdev]

Hi @cchaos,

I started working on this issue and after "fixing" it, I realized that the issue is not because the image has a data URI when allowFullScreen is true.

The problem is that the image in the example is very small. Here's an example with another small image without a data URI:
https://codesandbox.io/s/inspiring-agnesi-o8k7m?file=/index.js:1767-1798

I also left two example with large images and one of them with a data URI. Both examples, work well.

For small images, we could actually force the image to grow in width. If the image with data URI is an SVG it makes sense because it will keep a good quality. But what if it is not?

In my opinion, consumers should provide images with large sizes if they want to open in full screen. But if you think this is something we should have I can open a PR that:

• When allowFullScreen is true and the image has a size prop, it gets the size prop even if the image is small.
• When the full screen is active, the image is forced to go full width even if the image is small.

Should I open the PR?

[cchaos]

Thanks for investigating further! Yeah, my feeling is that adding the allowFullScreen prop shouldn't change the way the size prop behaves. I think this is what's most unexpected. So we just definitely do bullet 1.

I'm trying to think of situations where bullet 2 (forced enlarging in full screen mode) makes sense. It's certainly helpful with SVG's as you mentioned since they can scale without loss of quality. But does that then misrepresent the actual size of the image and I don't think we want to scale indefinitely even for images that were proportioned correctly when not in full screen mode.

I think more often than not, the image will be a raster image, so I'd opt for not scaling in full screen mode. So let's just tackle bullet one to ensure that allowFullScreen doesn't affect sizing (when not in full screen mode).