Single Pages: Hero images leave much whitespace

Current Behavior

Hero images on single page entries across many of the collections (like blog posts, events, resources, news, and so on), don’t fill the space afforded to the image, but instead leave a smaller image with extra, unused whitespace.

The current CSS with object-fit: contain; should work, but seems to not be having the desired affect given conflicting(?) CSS.

Desired Behavior

It would be nice to have the images fill the empty space.

Screenshots / Mockups

example: https://layer5.io/community/events/hacktoberfest-prep-easing-into-cncf-open-source-projects

---

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.
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack

[AbhishekTiwari23]

The change shouldn’t be limited to this page only. But, in general to the single blog,event pages

clarifying more on his words, @AbhishekTiwari23 have you checked other blog / event pages ?

Oh, now I understand the real issue, please give me a little time, I will respond as early as possible.

[Nikhil-Ladha]

Please create a PR with the changes, so that it is easier to confirm the changes work fine for all the pages.