Как установить для следующего компонента / изображения высоту 100%

Question

Как установить для следующего компонента / изображения высоту 100%

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

Я пробовал следующее:

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

Этот фрагмент успешно компилируется, но на интерфейсе я вижу следующую ошибку:

Ошибка: изображение с src "/deco.svg" должно использовать свойства "width" и "height" или свойство "unsized".

Это меня смущает, потому что, согласно документации , эти свойства не требуются при использовании layout="fill".

141

javascript reactjs next.js nextjs-image

Источник

user8006046 06 дек '20 в 17:56

23 ответа

Другие вопросы по тегам javascript reactjs next.js nextjs-image

user11209037 23 фев '21 в 12:59 2021-02-23 12:59 · Answer 1 · 2021-02-23 12:59

Вот что сработало для меня:

      <div style='width:104px;height:104px;position:relative;'>
    <Image
            alt="Mountains"
            src="/mountains.jpg"
            layout="fill"
            objectFit="contain"
    />
</div>

169

Источник

user11209037 23 фев '21 в 12:59

user8798220 13 апр '23 в 18:23 2023-04-13 18:23 · Answer 2 · 2023-04-13 18:23

В 2023 году все вышеперечисленные решения устарели.

используйте ниже

      <Image
  src="url"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: '100%', height: 'auto' }} // optional
/>

Github: https://github.com/vercel/next.js/discussions/18474#discussioncomment-5501724

153

Источник

user8798220 13 апр '23 в 18:23

user6478359 16 сен '21 в 09:38 2021-09-16 09:38 · Answer 3 · 2021-09-16 09:38

      <img src="/path/to/image.jpg" alt="" title="" />

В NextJS

      <Image src="/path/to/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="contain"/>

34

Источник

user6478359 16 сен '21 в 09:38

user7757900 18 авг '21 в 23:21 2021-08-18 23:21 · Answer 4 · 2021-08-18 23:21

Вот способ: например, я хочу иметь изображение, которое покрывает всю ширину и высоту своего контейнера, который является div.

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

И вот стиль: (Есть контейнер div, который занимает половину ширины и высоты области просмотра, и мое изображение будет закрывать его.)

      .image-container {
  width: 50vw;
  height: 50vh;

    > div {
        width: 100%;
        height: 100%;
        position: relative !important;
    }

    .image {
        object-fit: cover; // Optional
    }
}

PS Я использовал стилизованные компоненты для вложенных стилей.

user478162 16 янв '23 в 14:12 2023-01-16 14:12 · Answer 5 · 2023-01-16 14:12

И в следующем v13

             <Image
        src={src}
        width={200}
        height={160}
        alt={alt}
        sizes="(max-width: 768px) 100vw,
              (max-width: 1200px) 50vw,
              33vw"
        style={{ height: '100%', width: '100%' }} //The point is right there!
        //OR className='w-100 h-100'
      />

благодаря @Abílio Soares Coelho

14

Источник

user478162 16 янв '23 в 14:12

user12121067 06 дек '20 в 18:31 2020-12-06 18:31 · Answer 6 · 2020-12-06 18:31

Я думаю также предоставить атрибут соответствия объекта элементу Image следующим образом: -

      <Image
    alt="Mountains"
    src="/mountains.jpg"
    layout="fill"
    objectFit="cover"
  />

Пример, предоставленный Nextjs, может быть https://github.com/vercel/next.js/blob/canary/examples/image-component/pages/layout-fill.js

11

Источник

user12121067 06 дек '20 в 18:31

user11918751 16 ноя '22 в 19:17 2022-11-16 19:17 · Answer 7 · 2022-11-16 19:17

          <Image
    src="/deco.svg"
    alt="alternative text"
    fill
    style={{height: "100%", width:"100%"}}
    />

5

Источник

user11918751 16 ноя '22 в 19:17

user12425716 18 дек '22 в 15:01 2022-12-18 15:01 · Answer 8 · 2022-12-18 15:01

Возможно, эти другие ответы предназначены для другой версии NextJS, но ни один из них не работал у меня.

Я использую NextJS v13.0.0

Для этого у меня был следующий JSX (используя TailwindCSS, должно быть легко перевести на ванильный CSS):

      <div className="h-screen relative">
  <Image
   src="/image.png"
   alt="pic of dog"
   fill={true}
  />
</div>

Важной частью здесь является создание родительского элемента div.position: relative(и установить его высоту/ширину так, как вы хотите для изображения) и установитьfill={true}. Я получил это из документации NextJS Image:

Общая документация по изображениям: https://nextjs.org/docs/api-reference/next/image .

Документация поfillатрибут: https://nextjs.org/docs/api-reference/next/image#fill

Надеюсь, это поможет кому-то!

user8810113 05 окт '23 в 07:36 2023-10-05 07:36 · Answer 9 · 2023-10-05 07:36

Вот что работает сnext/imageв следующих 13.5

      width={0}
height={0}
sizes="100vw"
style={{ width: 'auto', height: '50px' }}

4

Источник

user8810113 05 окт '23 в 07:36

user2395282 01 янв '23 в 15:50 2023-01-01 15:50 · Answer 10 · 2023-01-01 15:50

      <Image
    src="/deco.svg"
    alt=""
    width={1000}
    height={1000}
    className='nextimg'
/>

в том месте, где ваша таблица стилей добавляет

      .nextimg{
  width: 100%;
  height: auto;
}

Кстати, я добавил 1000 для ширины и высоты, когда небольшое изображение становится нечетким . и думаю, что вы можете добавить свои собственные стили для класса nextImg

user6082084 18 ноя '22 в 21:36 2022-11-18 21:36 · Answer 11 · 2022-11-18 21:36

Для меня в Next 13 все работало нормально после того, как я импортировал изображение и переместил его изpublic:

До

      <Image src='/link-to-public/img.png' alt="topmoto.pro" />

После

      import img from "../assets/img.png";
...
<Image src={img} alt="topmoto.pro" />

2

Источник

user6082084 18 ноя '22 в 21:36

user12242764 28 ноя '21 в 10:49 2021-11-28 10:49 · Answer 12 · 2021-11-28 10:49

Если вы не хотите использовать абсолютные значения высоты и ширины, то есть в пикселях и т. д., вы можете сделать что-то вроде этого

          <div style={{ position: "relative", width: "100%", paddingBottom: "20%" }} >
  <Image
    alt="Image Alt"
    src="/image.jpg"
    layout="fill"
    objectFit="contain" // Scale your image down to fit into the container
  />
</div>

Первоисточник /questions/56649842/kak-ispolzovat-komponent-izobrazheniya-v-nextjs-s-neizvestnoj-shirinoj-i-vyisoto/56791684#56791684

user13332763 18 фев '23 в 18:16 2023-02-18 18:16 · Answer 13 · 2023-02-18 18:16

В Next 13 при получении изображений с внешних URL-адресов вы можете просто передать fill.

      import Image from "next/image";

<Image
  src="https://unaqua.com.br/img/logo.png"
  fill
/>

1

Источник

user13332763 18 фев '23 в 18:16

user9127166 26 июл '22 в 11:46 2022-07-26 11:46 · Answer 14 · 2022-07-26 11:46

работает для меня

      <div
  style={{
    display: 'flex',
    flexDirection: 'column',
    height: 'auto',
    maxHeight: 343,
    position: 'relative'
  }}
>
  <Image
    src={`<YOU_IMAGE>`}
    alt="thumbnail"
    width="100%"
    height="100%"
    layout="responsive"
  />
</div>

1

Источник

user9127166 26 июл '22 в 11:46

M. R. D. M. 28 окт '23 в 07:33 2023-10-28 07:33 · Answer 15 · 2023-10-28 07:33

Начиная с Next.js 13.5, добавлениеlayout="responsive"& добавление имени класса и стиля в файл .css работает

      <Image
    width={100}
    height={120}
    layout="responsive"
    className="sample_img"
    src="..."
    alt={"Sample Image"}
/>

Файл стилей.css:

      .sample_img{
   max-height: 5rem;
   aspect-ratio: 1;
}

После загрузки CSS изображение изменится с100px * 120pxк5rem * 5remразмеры

user17194532 05 мар '22 в 10:44 2022-03-05 10:44 · Answer 16 · 2022-03-05 10:44

      If someone use NextJS with styled components. It works:

 const Container = styled.div`
  width: 100%;

  div, span {
    position: unset !important;
  }

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

      <Container>
            <Image src={ src }
                   layout="fill"
                   className={ "image" }          
            />
        </Container>

1

Источник

user17194532 05 мар '22 в 10:44

user12981937 21 ноя '21 в 10:19 2021-11-21 10:19 · Answer 17 · 2021-11-21 10:19

      <Image src='/images/wipster-medialibrary-1.png' width="100%" height="100%" layout="responsive" objectFit="contain"></Image>

у меня сработало, если вы хотите, чтобы изображение помещалось в родительский контейнер.

НЕ используйте layout='fill', на самом деле по какой-то причине изображение помещается на весь экран.

0

Источник

user12981937 21 ноя '21 в 10:19

user17238819 16 фев '23 в 07:00 2023-02-16 07:00 · Answer 18 · 2023-02-16 07:00

в изменениях CSS --->

      .next-image {
    max-width: 100%;
    div {
        position: unset !important;
        padding: 0px !important;
        img {
            position: unset !important;
            width: 100% !important;
            height: 100% !important;
            max-height: 100% !important;
            max-width: 100% !important;
        }
    }
}

в компоненте JSX или TSX --->>

      <div className="next-image min-h-[150px]">
          <Image
            src={product?.images?.length ? product?.images[0]?.src : placeholderImage}
            width={imgWidth}
            height={imgHeight}
            layout="responsive"
            loading={imgLoading}
            quality={100}
            alt={product?.title || 'Product Image'}
            className="your Class"
          />
        </div>

user3904677 20 дек '20 в 09:30 2020-12-20 09:30 · Answer 19 · 2020-12-20 09:30

Добавить опору unsized:

      <Image 
  unsized
  layout="fill"
  src={src}
/>

0

Источник

user3904677 20 дек '20 в 09:30

user8627333 14 май '23 в 14:36 2023-05-14 14:36 · Answer 20 · 2023-05-14 14:36

Когда вы используетеlayoutимущество стоимостьюfill, Next.js автоматически установитposition: absoluteиtop:0,left:0,right:0, иbottom:0Свойства CSS компонента изображения, благодаря которым он заполняет свой контейнер. Однако Next.js все равно необходимо знать исходные размеры изображения, чтобы он мог определить соотношение сторон и соответствующим образом изменить его размер.

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

      <Image  
  src="/deco.svg"
  alt = ""
  layout="fill"
  unsized
 />

user8598696 09 июл '23 в 06:26 2023-07-09 06:26 · Answer 21 · 2023-07-09 06:26

Изображение с автоматической высотой и шириной. Это отобразит фактический размер изображения.

      <Image
  src={selectedImage}
  width={0}
  height={0}
  alt=""
  style={{ width: "auto", height: "100%" }} // optional
/>

Изображение с фиксированной высотой и шириной.

      <div style={{ position: "relative", width: "200px", height: "279px" }}>
  <Image
    src={selectedImage}
    fill
    alt=""
    style={{ objectFit: "cover" }}  // As per your requirement
  />
</div>

user5423183 12 июн '22 в 16:42 2022-06-12 16:42 · Answer 22 · 2022-06-12 16:42

      <img alt="" src="https://some/image/uri" loading="lazy" />

В NextJS

      <div>
  <Image
    alt=""
    src="https://some/image/uri"
    width="100%"
    height="100%"
    layout="fill"
    objectFit="contain"
  />
</div>

-1

Источник

user5423183 12 июн '22 в 16:42

user11082411 19 июн '22 в 14:52 2022-06-19 14:52 · Answer 23 · 2022-06-19 14:52

У меня это работает в компоненте изображения next.js

      <Image src="/path/image.jpg" alt="" title="" width="100%" height="100%" layout="responsive" objectFit="cover"/>

-1

Источник

user11082411 19 июн '22 в 14:52