Estoy tratando de optimizar mi sitio web con la etiqueta de Image nativa de Next. Sin embargo, estoy luchando para establecer alturas variables en las imágenes. Dado que las imágenes pueden tener una altura diferente, no estoy seguro de cómo funciona eso con Next Image.

El problema

¿Cómo establecer alturas variables en cada imagen proveniente de una API?

Acercamiento inicial

Sin usar Siguiente/Imagen, puedo lograr el resultado de una estructura similar a una cuadrícula con alturas de imagen irregulares.

 <figure key={index} className="break-inside-avoid-column"> <img src={img.url} alt={img.altText} /> <figcaption> {img.altText} </figcaption> </figure>

Esto es lo que se muestra en el navegador y el efecto al que intento convertir con la siguiente imagen:

Nuevo enfoque

Después de cambiar la etiqueta img anterior a Image , esto es lo que se me ocurrió. Todo funciona, pero las alturas variables de cada imagen están configuradas a la misma altura. Mi objetivo es que las alturas de la imagen sean variables, solo los anchos deben ser iguales.

 <figure key={index} className="block mb-10 text-center break-inside-avoid-column"> <Image layout="responsive" width="100%" height="100%" className="object-cover rounded-xl" src={img.url} alt={img.altText} /> <figcaption className="z-10 mt-4 text-sm italic text-gray-600"> {img.altText} </figcaption> </figure>

Aquí está el resultado de usar la etiqueta de Image en el navegador: