Как дать контейнеру динамическую ширину с помощью компонента Next JS Image?

Question

Итак, у меня есть контейнер divи компонент в нем. Я хочу, чтобы высота изображения была равна 100% высоты контейнера, а ширина контейнера автоматически определялась на основе ширины изображения в соответствии с его соотношением сторон. Когда я использую нормальный img тег, это работает без проблем, но в случае Next Image компонент, изображение остается шириной 0px. Потому что он хочет, чтобы я определил фиксированную ширину для контейнера. ? Как я могу добиться того, чего хочу?

Я делаю вот что:

для div:

      div {
   height: 50px;
   width: auto;
}

для компонента изображения:

      <Image src="..." alt="..." layout="fill" />

Answer 1

Насколько я знаю, изображение в следующем js имеет одно большое преимущество - ленивую загрузку, сохраняющую пространство, которое изображение будет использовать после загрузки, без разрушения макета.

Это было бы невозможно, если бы мы не передавали размер изображения заранее.

Определите пределы этого. Итак, я делаю ставку на эту причину.

Вот почему я использую много img вместо Image. Но если вы знаете точный размер ... лучше используйте Image.

PS. Разработчики Google участвовали в разработке функции, которую я только что описываю.

Answer 2

Я думаю, что самый простой способ - просто определить ширину div в ems или же remsи определите то же самое для изображения, чтобы оно было точной длины, а родительский элемент имел соотношение с изображением и самим div. Хорошего дня :)