Add fitMode property on Image Elements.

[jpauloruschel]

Fixes #3726

Adds a new property to Element component, used only on Image: fitMode. Set how the content should be fitted and preserve the aspect ratio of the source texture or sprite. (nomenclature is borrowed from https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit):

• stretch (default; pc.FITMODE_STRETCH): Fit the content exactly to the Element's bounding box.
• contain (pc.FITMODE_CONTAIN): Fit the content within the Element's bounding box while preserving its Aspect Ratio.
• cover (pc.FITMODE_COVER): Fit the content to cover the entire Element's bounding box while preserving its Aspect Ratio.

the white boxes are other Image elements placed on top of the actual image and are there just to represent the actual bounds of each Element

Extra: Cover + Masking

The cover setting works very well with an additional mask Element if the desired effect is to clip the content to only display the part inside the bounding box:

I confirm I have read the contributing guidelines and signed the Contributor License Agreement.

[mvaligursky]

Few small comments, but this looks great!

[Maksims]

If contain is used, the out of image part, will be discarded?

[jpauloruschel]

If contain is used, the out of image part, will be discarded?

What do you mean by 'discarded'? Both contain and cover change the vertices of the internal mesh used to render the element. So for contain, the part out of the image is completely empty.

[Maksims]

If contain is used, the out of image part, will be discarded?

What do you mean by 'discarded'? Both contain and cover change the vertices of the internal mesh used to render the element. So for contain, the part out of the image is completely empty.

I see, just on a screenshot in PR, it showed grey areas.

[jpauloruschel]

If contain is used, the out of image part, will be discarded?

What do you mean by 'discarded'? Both contain and cover change the vertices of the internal mesh used to render the element. So for contain, the part out of the image is completely empty.

I see, just on a screenshot in PR, it showed grey areas.

Aahh right! Yea sorry those are just other image elements placed on top just to represent the actual bounds. I updated the description to try and explain that further.