Estoy tratando de hacer un sitio web y usar este sitio de políticos canadienses como referencia. Me gusta cómo su barra de navegación y componentes de unión se colocan encima de su imagen, y cómo su imagen tiene una longitud fija y cambiar el tamaño de la ventana cambia el tamaño de la imagen solo un poco en función de los componentes en capas, pero también mantiene la relación de aspecto correcta y sin estirar.
Mi primer problema es que estoy usando componentes de imagen NEXT.JS y no sé cómo hacer que copie ese comportamiento de no estirar mientras mantiene un tamaño fijo.
Soy un chico de python. Me acaban de poner en este proyecto, así que mi segundo problema es que hice un componente de barra de navegación y voy a llegar al componente en lugar de su componente de unión, pero no puedo entender cómo su sitio web capas tan bien. En qué dirección debo mirar. ¡Gracias!
Esto es más un problema de css que un problema de NEXT.JS.
La clave es usar una imagen como fondo de una etiqueta <div> (o cualquier etiqueta), en lugar de una etiqueta <img> . Utilice las siguientes propiedades
background-image: url('....'); background-position: center; background-size: cover; background-repeat: no-repeat;