[Image Carousel] Investigate issues with aspect ratio

[leecalcote]

Current Behavior

The image carousel component that is used on integration pages (like this one) skews images as they are presented in the side navigator.

Desired Behavior

Ideally, all images have their aspect ratio maintained at all times even if it means cropping an image or making it smaller to fit the given space.

Screenshots / Mockups

Implementation

1. INvestigate and improve our documentation with respect to the ideal dimensions of the current image carousel's configuration.
2. Document those image dimensions with respect to the side menu.
3. Explore solutions that make image sizing dynamic, like use of object-fit.

Acceptance Tests

1. Documentation is updated.
2. Image aspect ratios are maintained.

---

Contributor Resources and Handbook

The layer5.io website uses Gatsby, React, and GitHub Pages. Site content is found under the master branch.

• 📚 See contributing instructions.
• 🎨 Wireframes and designs for Layer5 site in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack.

Join the Layer5 Community by submitting your community member form.

[vishalvivekm]

@leecalcote I'd like to investigate and fix the issue. Can it please be assigned to me ?

[ankushbhardwaj408]

@leecalcote i think either contain or cover can work as in both cases the aspect ratio of the image will not change

[leecalcote]

Thank you, gents. @ankushbhardwaj408, yes, I think that you're right that both are worth exploring.