Использование компонента Nextjs Image с разными размерами изображений

Question

Я пытаюсь использовать компонент Next.js Image с изображениями уникального размера. В их примере говорится, что изображение будет растягиваться до ширины и высоты родительского div. Я пробовал их обернуть, но не знаю, как учесть динамические размеры изображений. Я хочу иметь заданную ширину и высоту, которые можно отрегулировать для каждой соответствующей пропорции. TIA.

Вот мой код (изображения поступают из массива) - поскольку у меня нет установленной высоты, на странице ничего не отображается. Если я использую попутный ветер h-auto он по-прежнему не отображает:

      <div className="w-screen h-screen">
  {allImages.allImages.map((image, i) => {
    return (
      <div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
        <Image priority src={`/${image}`} layout="fill" objectFit="cover" />
      </div>
  )})}
</div>

Answer 1

Я нашел решение в этой статье , которое, кажется, работает.

      <div className={'image-container'}>
  <Image src={path} layout="fill" className={'image'} />
</div>

СКСС

      .image-container {
  width: 100%;

  > div {
    position: unset !important;
  }

  .image {
    object-fit: contain;
    width: 100% !important;
    position: relative !important;
    height: unset !important;
  }
}

Я завернул это в компонент с именем <ResponsiveImage />. Вы можете попробовать другие правила в оболочке, например position: relative.

Answer 2

Вы можете использовать эти реквизиты в теге изображения,

      <div className="div-class">
   <Image src={imageLink} layout="fill" objectFit="cover" />
</div>

и оберните тег изображения в div, как указано выше. Теперь вы можете указать ширину и высоту div с помощью медиа-запросов, и изображение будет использовать это пространство.