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

372
Vistas
En reaccionar, cómo escalar el componente principal de modo que todos sus componentes secundarios se escalen proporcionalmente
<Parent style={{transform: "scale(2)"}}> <Child_1 /> <Child_2 /> <Child_3 /> <Child_4 /> <Parent />

El objetivo es tener Child_X para escalar proporcionalmente y el espacio entre ellos para escalar proporcionalmente.

¿Cómo se puede lograr esto fácilmente?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Puede usar sus anchos si son divs.

1. Primero encuentre el ancho del elemento principal:

 document.getElementById("parentElement").offsetWidth
Nota: Este es solo un ejemplo porque no ha proporcionado el código de estos divs, por lo que es posible que tenga que cambiar esto un poco en consecuencia.

Aquí, estamos encontrando el ancho del elemento principal.

2. Encuentra el ancho del elemento secundario:

 document.getElementById("childElement").offsetWidth

Aquí, estamos encontrando el ancho del elemento secundario.

3. Encuentra la proporción:

 let parentWidth = document.getElementById("parentElement").offsetWidth; let childWidth = document.getElementById("childElement").offsetWidth; let proportion = childWidth / parentWidth;

Aquí, estamos dividiendo el ancho de los elementos secundarios por el ancho de los elementos principales para que podamos obtener la proporción en la que tenemos que dimensionar el elemento.

4. Utilice la propiedad scale() :

 let parentWidth = document.getElementById("parentElement").offsetWidth; let childWidth = document.getElementById("childElement").offsetWidth; let proportion = childWidth / parentWidth; <Parent style={{transform: "scale(2)"}}> <Child_1 style={{transform: {`scale(${2 * proportion})`}}}/> <Child_2 style={{transform: {`scale(${2 * proportion})`}}}/> <Child_3 style={{transform: {`scale(${2 * proportion})`}}}/> <Child_4 style={{transform: {`scale(${2 * proportion})`}}}/> <Parent />

Y listo, al usar la variable de proporción para cambiar dinámicamente el valor de la escala, ¡puede lograr fácilmente lo que desea!


Ahora, algunas preocupaciones:

Dado que este código funciona en teoría , no puedo decir que funcionará para usted ya que no ha proporcionado ningún código en su pregunta. Esto es malo, y asegúrese de proporcionar el código a partir de ahora. Esto es solo por su propio bien para que podamos escribir una mejor respuesta a su pregunta.

about 4 years ago · Juan Pablo Isaza 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