Project Featured Image Sizing

[SandroPacella]

Project Featured Image Sizing

The featured images on project detail pages are being cropped due to the fixed aspect-video ratio, which doesn't always suit the content of the images.

Current Behavior

• Images are forced into a 16:9 aspect ratio (aspect-video)
• Visible on pages like /live-react-graph-1

Technical Notes

Current implementation in src/app/[id]/page.js:

<div className="relative aspect-video mb-8">
  <Image
    src={project.image}
    alt={project.title}
    fill
    className="object-cover rounded-lg"
    priority
    sizes="(max-width: 1200px) 100vw, 1200px"
  />
</div>

To Do

• [ ] Evaluate optimal aspect ratio for project images
• [ ] Consider using dynamic aspect ratios based on image content
• [ ] Ensure consistent presentation across different image types
• [ ] Update image documentation for future project additions

[KamaleshKumarS]

hey man need any help or you are trying to solve it yourself?