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="" class="img">
</body>
</html>
kann mir das jemand erklären????
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;
}
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 } }