Set height 100vh for next/image-CodePudding

it's incredible. I have tried with all means to get the image component of nextjs to 100vh, width is supposed to be automatic. I went through the whole documentation and its examples with the layout proerty, but nothing fits.

Target: height 100vh, width:auto

import img6 from "./image.jpg";

import styles from "../styles/slider.module.css";

export default function about() {
  return (
    <>
      <div className={styles.slider}>
        <Image
          alt=""
          src={img6}
          // layout="responsive"
          // layout="fill"
          // objectFit="cover"
          className={styles.image}
          // style={{ height: "100vh" }}
          // width="300px"
          // height="100%"
        />
      </div>
    </>
  );
}

.slider {
  display: block;
  height: 100vh;
}

.image {
  height: 100vh;
  width: auto;
}

With html it is easy:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .img{
            height: 100vh;
        }
    </style>
</head>
<body>

<img src="http://placeimg.com/640/480/animals/sepia" alt="" >

</body>
</html>

kann mir das jemand erklären????

CodePudding user response：

The parent div should have position relative

<div className={styles.slider}>
    <Image
        alt=""
        src={img6}
        layout="fill"
    />
</div>

.slider {
  display: block;
  height: 100vh;
  position: relative;
}

CodePudding user response：

For those who are interested, I solved it using layout='raw', which is still experimental.

Related Github Issues:

And next.config.js:

experimental: { images: { layoutRaw: true } }