KImg: Add scaling and placeholder logic

[MisRob]

Summary

Implement placeholder and scaling logic for KImg.

This includes the following props:

• aspectRatio
• scaleType
• placeholderColor
• borderRadius

and the placeholder slot.

See the epic issue for more details about those props and the slot, as well as for the description and illustration of scale types to be implemented.

Epic

• KImg Component #368

Acceptance criteria

• All props and the slot mentioned above are functioning according to how they are defined in the epic issue
• All 'centerInside', 'contain', and 'fitXY' scale types are implemented
• KImg throws a warning when aspectRatio prop value is provided in an unsupported format
• KImg throws a warning when unsupported scaleType prop value is provided
• The placeholder area respects sizing (could be set for example with width, height, maxWidth props, etc.), aspectRatio, and borderRadius settings the same way an image would if it were available
• The placeholder slot's content is centered and shows behind a loading image (progressive UI), when an image could not be loaded, or when there is no or empty image src provided. It is rendered on top of the container filled with the placeholderColor.
• Documentation is updated with all new features. Contains guidance and examples whenever relevant.

Linked issues

• Blocked by

  • KImg: Implement the basic component #369

• Blocking

  • KImg: Add 'appearanceOverrides' #371
  • KImg: Kolibri Fly! #373
  • KImg: Polish documentation #374

[MisRob]

Regarding aspect ratio, we already have it implemented in Kolibri's thumbnail for 16:9, inspired by this technique: https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/. This component also contains logic for placeholders that could be re-used. My recommendation would be to try to build on top of that and generalize it for any aspect ratio.

[BabyElias]

Hello @MisRob ! Can I work on this issue?

[MisRob]

Hi @BabyElias, thank you. KImg work is already in progress so this wouldn't be suitable.

[BabyElias]

Okay, thanks!

[MisRob]

Closed by #538