[EuiImage] Fix bug in small images not respecting the optional sizes when allowFullScreen is true

[miukimiu]

Summary

This PR closes #4055.

When allowFullScreen was set to true the optional sizes were not respected in small images. This PR forces the small images to respect all the optional sizes.

How to test

This could be tested by adding this CodeSandbox Example into src-docs/src/views/image/image_size.js.

Checklist

• Check against all themes for compatibility in both light and dark modes
• Checked in mobile
• Checked in Chrome, Safari, Edge, and Firefox
• [ ] Props have proper autodocs
• ~[ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4207/

[cchaos]

Thanks! This fixes the issue.

The other oddity I noticed is the placement sometimes of the fullScreen and close icons. Because they're being positioned against the entire figure (containing the caption), it doesn't always overlap the image. Perhaps we can just add position:relative to the button and then move the close icon to be positioned against the window instead of the image.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4207/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4207/

[cchaos]

👍 LGTM. The only other tweak you might want to consider is that the overlay mask in Amsterdam is actually dark and not light so it's hard to see the close button.

[miukimiu]

jenkins test this

[miukimiu]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_4207/