Блог

При использовании Next.js компонент изображения, документы утверждают, что: «При заполнении изображение растягивается как по ширине, так и по высоте до размеров родительского элемента, обычно в паре с подгонкой объекта».

Однако это совсем не то, что он делает. То, что он на самом деле делает, — это заполняет изображение, чтобы оно занимало весь экран в фиксированном положении, которое не учитывает прокрутку. Я пробовал когда-либо одно object-fit возможное значение для img стиля, и ничто не делает его таким, чтобы компонент заполнял родительский элемент так, как это должно быть. Проблема, безусловно, связана с тем фактом, что Image компонент завернут в div форму, которая не может быть оформлена в приложении React.

Чтобы воспроизвести, создайте новый следующий проект и поместите изображение в общую папку. Сделай это:

 export default function Home() {
  return (
    <div>
      <div style={{width: '100px', height: '100px'}}>
        <Image src={"/i.png"} layout='fill'/>
      </div>
    </div>
  )
}
 

Изображение займет весь экран. Вы можете попробовать стилизовать Image компонент, может быть, я чего-то не понимаю.

Кто-нибудь знает, как это исправить или почему это происходит? Эта функция просто полностью сломана?

Обертывающий div должен иметь position: relative :

 export default function Home() {
  return (
    <div>
      <div style={{width: '100px', height: '100px', position: 'relative'}}>
        <Image src={"/i.png"} layout='fill'/>
      </div>
    </div>
  )
}
 

Это следствие того, как position: absolute работает. Содержащийся в нем блок будет ближайшим элементом-предком, имеющим любое значение позиции, кроме static (начального значения).

Вам нужно использовать position: relative для родительского элемента.