It's really amazing. I've tried everything to make the image component in nextjs 100vh in height, with automatic width. I've read through all the documentation and examples using the layout property, but nothing seems to work.
Goal: 100vh height, auto width
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;
}
It's easy with html:
<!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>
Can someone explain this to me????