Картинка на всю область в NextJS

Давайте заполним заданный прямоугольник картинкой - как обложку карточки, баннер или превью с фиксированной высотой. У компонента Image для этого есть пропс fill: изображение растягивается на родительский блок. Родитель должен иметь position: relative и явные размеры по ширине и высоте. Вместе с fill обязательно указывают пропс sizes - он подсказывает браузеру, какой ширины ждать картинку на разных экранах. При этом width и height в таком варианте не задают.

Файл photo.jpg лежит в public. Оформим обертку и картинку так:

import Image from 'next/image';

export default function Home() {
	return (
		<div
			style={{
				position: 'relative',
				width: '100%',
				height: '400px',
			}}
		>
			<Image
				src="/photo.jpg"
				alt="City skyline at sunset"
				fill
				sizes="100vw"
			/>
		</div>
	);
}

Задайте на странице блок с относительным позиционированием и фиксированной высотой.

Заполните этот блок изображением из public так, чтобы оно занимало всю область блока.