Image component alignment and placeholder

[jroebu14]

Supports #10306

Overall change:
While replacing the old image component with the new one in the StoryPromo component, some minor behaviour differences were observed. These include:

• when aspect ratio defined is different from image's intrinsic aspect ratio, image was not centred in container
• PNG transparent images revealed the container's placeholder
• sizes attribute with default 100vw was sizing the image in AMP incorrectly when dimensions were not provided
• attribution prop for AMP images did not exist

This PR addresses the above issues and updates the README to explain better how the aspect ratio works.

Code changes:

• uses state and onLoad event to trigger removing placeholder when image has loaded so transparent PNG images do not reveal placeholder
• fixes aspect ratio centering using aspectRatio and objectFit:cover CSS properties
• fixes AMP image scaling incorrectly when dimensions are not provided using technique described here. also removes default 100vw sizes value as this contributed to incorrect scaling

---

• I have assigned myself to this PR and the corresponding issues
• I have added the cross-team label to this PR if it requires visibility across World Service teams
• I have assigned this PR to the Simorgh project
• (BBC contributors only) This PR follows the repository use guidelines

Testing:

• Automated (jest and/or cypress) tests added (for new features) or updated (for existing features)
• If necessary, I have run the local E2E non-smoke tests relevant to my changes (CYPRESS_APP_ENV=local CYPRESS_SMOKE=false yarn test:e2e:interactive)
• This PR requires manual testing

[eagerterrier]