0

Cómo puedo mantener las dimensiones de un elemento hijo, al escalar las dimensiones de su elemento padre?

  <div class="parent">
     <h1 class="child">Hola mundo</h1>
  <div>

 .parent{
  width: 50px;
  height: 50px;
  transform:scale(5);
  background:"red";
}   

.child{
 width: 50px;
 height: 50px;
 font-size:20px; 
 }

1 respuesta 1

0

Puedes aplicar el transform también al hijo con un valor inverso al del padre.

Si el padre escala en 5 unidades entonces el hijo escala 5 unidades a la inversa 1/5 = 0.2.

 .parent{
  width: 50px;
  height: 50px;
  background:red;
  transform: scale(5);
}   

.child{
 width: 50px;
 height: 50px;
 font-size:20px; 
 transform: scale(0.2);
 }
 
  <div class="parent">
     <h1 class="child">Hola mundo</h1>
 <div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.