Estoy tratando de crear una galería de imágenes con un diseño similar al de Masonry. Significa que el diseño contiene algunas columnas y con el mismo ancho y cantidad de columnas depende del ancho de la ventana gráfica actual. La altura de cada elemento es flexible y depende de la imagen que se representará en el elemento de la galería en particular. Entonces, el envoltorio del elemento no tiene límites de altura, pero el ancho es limitado.

Anteriormente usé la etiqueta img simple para cada elemento de la galería para representar la imagen

 <img src={src} alt={description} />

y se representa a sí mismo con el Ancho y Alto igual que la imagen original y es exactamente lo que quiero porque se representa a sí mismo con las distintas alturas y, por lo tanto, el diseño de mampostería funciona como debería.

Hasta ahora, todo bien, pero me gustaría usar el componente de imagen Next.js porque tiene muchas características agradables, como carga diferida, carga de marcador de posición borroso, etc. Sin embargo, no puedo encontrar la manera de lograr el mismo comportamiento que en el caso de uso estándar de img .

No puedo usar el layout="fill" con width & height = 100% porque el contenedor principal del elemento no tiene altura

 <Image width="100%" height="100%" layout="fill" src={src} alt="Picture of the item" />

La imagen en sí debe ser un "dictador de altura" para el contenedor principal y tampoco puedo usar los valores directos con/altura para configurar el componente Imagen porque estas propiedades son desconocidas para cada imagen.

Entonces, me pregunto si es posible lograr este comportamiento en el caso del componente de imagen Next.js.

¡Apreciaré cualquier ayuda e información!