little bay
I'm trying to figure out the best way to build an image gallery where I don't always know what the image width and height are a head of time and the images may have different aspect ratios. I've started with the NextJS blog example (https://github.com/vercel/next.js/blob/canary/examples/blog-starter/components/cover-image.tsx) which uses CSS grid. They just use a plain <img> without specifying image width or height. But I'm trying to swap it out with next/future/image which either requires a width/height or fill property. I want my gallery to be performant.
This is what I currently have but it's not quite working. I think for fill to work, maybe I need a relative tag on the parent? I'm wondering if a better solution is to somehow read the width/height from the image?
<Image
fill
placeholder="blur"
blurDataURL={rgbDataURL(235, 235, 228)}
src={src}
alt={`Cover Image for ${title}`}
className="w-full h-auto object-contain transition-transform group-hover:scale-95 duration-300 ease-out"
/>
short fractal