Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

170
Vistas
Cómo superponer una imagen debajo de los componentes en React NEXT.JS

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!

about 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

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;
about 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda