es increíble. He intentado por todos los medios obtener el componente de imagen de nextjs a 100vh, se supone que el ancho es automático. Revisé toda la documentación y sus ejemplos con la propiedad de diseño, pero nada encaja.
Objetivo: altura 100vh, ancho: automático
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; }Con html es fácil:
<!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????
El div principal debe tener una posición relativa
<div className={styles.slider}> <Image alt="" src={img6} layout="fill" /> </div> .slider { display: block; height: 100vh; position: relative; }Para aquellos que estén interesados, lo resolví usando layout='raw' , que aún es experimental.
Problemas relacionados con Github:
Y next.config.js :
experimental: { images: { layoutRaw: true } }