Чтобы сделать компонент изображения Next.js адаптивным, вы можете использовать следующие методы:

1. Flexbox: используйте свойства Flexbox CSS для управления размером и выравниванием компонента изображения. Примените гибкую ширину и высоту к родительскому контейнеру и установите ширину изображения на «100%», чтобы сделать его адаптивным.

<div style={{ display: "flex", width: "100%", height: "auto" }}>
  <Image src="/path/to/image.jpg" layout="fill" objectFit="contain" />
</div>

2. CSS Grid: используйте свойства сетки CSS для создания адаптивного макета. Определите контейнер сетки и установите ширину изображения на «100%», чтобы заполнить доступное пространство.

<div style={{ display: "grid", width: "100%" }}>
  <Image src="/path/to/image.jpg" layout="fill" objectFit="contain" />
</div>

3. Медиа-запросы CSS. Используйте медиазапросы CSS для применения различных стилей в зависимости от размера экрана. Отрегулируйте ширину и высоту компонента изображения соответствующим образом.

<style jsx>{`
  .responsive-image {
    width: 100%;
    height: auto;
  }
  @media (max-width: 768px) {
    .responsive-image {
      width: 50%;
    }
  }
`}</style>
<Image src="/path/to/image.jpg" className="responsive-image" />

4. Единицы области просмотра CSS: используйте единицы области просмотра CSS, чтобы компонент изображения реагировал на размер области просмотра.

<Image src="/path/to/image.jpg" style={{ width: "100vw", height: "auto" }} />

5. Отзывчивые библиотеки React. Вы также можете использовать адаптивные библиотеки React, такие как react-Responseили react-Response-image, которые предоставляют компоненты и утилиты, специально разработанные для адаптивных изображений в React. приложения.

import { ResponsiveImage } from 'react-responsive-image';
<ResponsiveImage src="/path/to/image.jpg" />