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

375
Vistas
In react, how to scale parent component such that all of its child components scale proportionally
<Parent style={{transform: "scale(2)"}}>
  <Child_1 />
  <Child_2 />
  <Child_3 />
  <Child_4 />
<Parent />

The goal is to have the Child_X to scale proportionally and the spacing between them to scale proportionally.

how can this be easily achieved?

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

0

You can use their widths if they are divs.

1. First find the width of the parent element:

document.getElementById("parentElement").offsetWidth
Note: This is just an example because you haven't provided the code of these divs so you may have to change this a little accordingly.

Here, we are finding the width of the parent element.

2. Find the width of child element:

document.getElementById("childElement").offsetWidth

Here, we are finding the width of the child element.

3. Find the proportion:

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

Here, we are dividing the child elements width by the parent elements width so that we can get the proportion by which we have to size the element.

4. Use the scale() property:

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 />

And there you go, by using the proportion variable to dynamically change the value of the scale, you can easily achieve what you want!


Now, a few concerns:

Given, that this code works in theory I can't say that it will work for you since you haven't provided any code in your question. This is bad, and make sure you provide the code from now on. This is only for your own good so that we can write a better answer for your question.

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