[UI] Fix KCD Vietnam event banner image sizing and cropping

[Akashstztt]

Description

The banner image on /landing/kcd-vietnam gets cropped due to object-fit: cover not suiting its square aspect ratio. Important visual content is lost because the current CSS is designed for wide/landscape banners, but this event's banner image is square.

Steps to Reproduce

1. Visit https://project-hami.io/landing/kcd-vietnam and https://project-hami.io/landing/kubecon-japan
2. Observe the event banner at the top of the page

Expected Behavior

The banner image should display without unwanted cropping, regardless of its aspect ratio. Possible approaches:

• Use object-fit: contain instead of cover for the .banner class
• Adjust the container's height/aspect-ratio to better match square images
• Add per-event configuration for banner display mode

Screenshot

(attach the screenshot of the cropped banner here — drag it into this box)

Related

Noticed while working on #742. Tracked separately since it's an unrelated visual/CSS issue.

[coderabbitai]

🔗 Related PRs

#751 - fix: balance EventLanding hero on wide screens [open]
#752 - fix: center and properly size event banners regardless of aspect ratio (#746) [open]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[Akashstztt]

Hi @rootsongjc @fishman, I’ve raised this issue regarding the KCD Vietnam banner image sizing/cropping. Could you please have a look and share your thoughts on whether this is worth addressing? Thanks!

[Akashstztt]

/assign @Akashstztt

[rootsongjc]

yes, please create a PR to fix it @Akashstztt

[Akashstztt]

Hi @rootsongjc @fishman , just wanted to follow up on . Please have a look whenever you get a chance. Thanks

[rootsongjc]

I have a suggestion: if using a banner, it could be generated using HTML+CSS to ensure consistent dimensions, instead of manually uploading images. If images must be uploaded, they should be of uniform size (if they are to be displayed). It could also serve as a cover image for thumbnail sharing on social media.
Also, I don't think it's appropriate to put the sharer's name directly in the image; it would be better to make it a configuration option that can be displayed on the website.

[Akashstztt]

Thanks for the suggestion @rootsongjc — agreed, generating the banner via HTML+CSS would be more maintainable and solve the sizing problem at the root, and being able to reuse it as a social-share cover image is a great idea too. That said, it's a bigger change (new component, image generation, etc.), so I'd rather not fold it into this fix, which is just resolving the immediate cropping bug. I'll open a separate issue to track it — happy to take a first pass once #746/#752 are merged.

[Akashstztt]

cc: @rootsongjc @fishman Please have a look whenever you get a chance. Thanks

[Akashstztt]

Hi @rootsongjc , just following up on this. Whenever you get a chance, could you please take a look and share your feedback? Thanks!

[rootsongjc]

I think we need to redesign the landing page, not just change the style, but also the data structure.

[Akashstztt]

That makes sense @rootsongjc — a proper redesign that rethinks the data structure (not just image handling) would address this more completely than the current fix does. I'd rather not scope that into #752 though, since that PR is specifically the reported cropping bug and is already in review.

Would it help if I opened a design/discussion issue to scope out what the redesign would actually involve (e.g. what data structure changes you're thinking of, whether banners become HTML+CSS-generated as you suggested earlier, how existing events migrate)? Happy to help drive that if there's appetite for it, but wanted to check before starting something that size unprompted.

[fishman]

I agree with @rootsongjc but i also think that we can still fix this bug regardless. But actually the cropping works fine for embeddings and on mobile. which is the most common use case does it affect those cases?