css - span - transform scale 1.2);
Escala/amplía un elemento DOM y el espacio que ocupa usando la escala de transformación CSS3() (1)
El HTML (Gracias Rory)
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Sandbox for Stack Overflow question http://stackoverflow.com/q/10627306/578288" />
<meta charset=utf-8 />
<title>Sandbox for SO question about scaling an element both visually and dimensionally</title>
</head>
<body>
<div id="wrapper">
<div class="surrounding-content">
before
</div>
<div id="content-to-scale">
<div>something inside</div>
<div><img src="http://placekitten.com/g/150/100"></div>
<div>another something</div>
</div>
<div class="surrounding-content">
after
</div>
</div>
</body>
</html>
El CSS (Aún comenzó desde la base de Rory)
body {
font-size: 13px;
background-color: #fff;
}
#wrapper {
width: 50%;
margin-left: auto;
margin-right: auto;
border: 0.07692307692307693em solid #888;
padding: 1.1538461538461537em;
}
.surrounding-content {
border: 0.07692307692307693em solid #eee;
}
#content-to-scale {
border: 0.07692307692307693em solid #bbb;
width: 10em;
}
#content-to-scale {
font-size: 1.1em;
}
#content-to-scale img {
width: auto;
height: auto;
min-width: 100%;
max-width: 100%;
}
La explicación:
Estoy usando tamaño de fuente y ems para "escalar" las dimensiones de los elementos secundarios.
Ems son unidades de dimensión que son relativas al tamaño de fuente del contexto actual.
Entonces, si digo que tengo un tamaño de fuente de 13 píxeles y un borde de 1 (el ancho de borde deseado en píxeles) dividido por 13 (el tamaño de fuente del contexto actual también en píxeles) = 0.07692307692307693, el navegador debe mostrar un 1px frontera
Para emular un relleno de 15 píxeles, uso la misma fórmula (píxeles deseados) / (tamaño de fuente del contexto actual en píxeles) = ems deseado. 15/13 = 1.1538461538461537em
Para domesticar el escalamiento de la imagen, uso un viejo favorito mío: la escala preservadora de la relación natural, permítanme explicar:
Las imágenes tienen una altura y ancho natural y una relación entre ellas. La mayoría de los navegadores conservarán esta relación si tanto el ancho como el alto están configurados en automático. A continuación, puede controlar el ancho deseado con min-width y max-width, en este caso, siempre se escala al ancho completo del elemento principal, incluso cuando se escalará más allá de su ancho natural.
(También puede usar max-width y max-height 100% para evitar que la imagen salga de los bordes del elemento principal, pero sin escalar más allá de sus dimensiones naturales)
Ahora puede controlar la escala ajustando el tamaño de la fuente en # content-to-scale. 1.1em es aproximadamente igual a la escala (1.1)
Esto tiene algunos inconvenientes: el tamaño de fuente anidado en ems se aplica de forma recusiva. Es decir, si tienes:
<style type="text/css">
div{
font-size: 16px;
}
span{
font-size: 0.5em;
}
</style>
<div>
<span>
<span>
Text
</span>
</span>
</div>
Terminará con un renderizado de "Texto" a 4px en lugar de 8px que podría esperar.
En el medio de mi página tengo un elemento div con algún contenido (otros divs, imágenes, lo que sea).
<div>
before
</div>
<div id="content-to-scale">
<div>something inside</div>
<div>another something</div>
</div>
<div>
after
</div>
Me gustaría escalar ese elemento (contenido a escala) y todos sus elementos secundarios. Parece un trabajo para la operación de escala de la transformación CSS3. Sin embargo, el problema es que esta es una transformación en la visualización de esa jerarquía de elementos solamente, no cambia la cantidad de espacio (o posición) del elemento en la página. En otras palabras, escalar ese elemento más grande hará que se superponga con el texto "antes" y "después".
¿Existe una manera simple / confiable de escalar no solo la representación visual, sino también la cantidad de espacio ocupado?
Puntos extra para CSS puro sin Javascript. Aún más puntos para una solución que hace lo correcto con otras funciones de transformación como rotar y sesgar. Esto no tiene que usar la transformación CSS3, pero sí debe ser compatible con todos los navegadores recientes compatibles con HTML5.