Сделайте изображения разного размера отзывчивыми с помощью next/image

#next.js #nextjs-image

Вопрос:

Я использую next.js версия 12 в моем проекте. У меня есть блоки, содержащие изображения разных размеров. Я хочу использовать next/image, но я новичок в этом и не смог понять, как сделать изображения разного размера отзывчивыми.

Если я использую layout=»отзывчивый», мне нужно исправить размеры, но у меня разные размеры:

 lt;Image src={`/images/${image}`} key={item} width={500} height={300} layout={'responsive'} /gt;  

Когда я использую layout=»заливка», мне нужно указать размеры родительского div, и опять же это не то, что я хочу. Есть ли способ достичь того, чего я хочу, без написания функции, которая будет проверять каждый размер изображения и передавать его компоненту изображения?