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 comenzado 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 el tamaño de fuente y EMS a " escala "las dimensiones de los elementos secundarios.
Ems son unidades de dimensión que son relativas al tamaño de fuente del contexto actual.
Así que si digo que tengo un tamaño de fuente de 13px y un borde de 1 (la frontera de ancho deseado en píxeles) divded por 13 (tamaño de fuente del contexto actual también en píxeles) = 0.07692307692307693em el navegador debe representar un borde de 1px
Para emular un relleno de 15px utilizo la misma fórmula, (píxeles deseados)/(tamaño de fuente del contexto actual en píxeles) = ems deseado. 15/13 = 1.1538461538461537em
Para domar el escalado de la imagen que utilizo un viejo favorito de la mía: la relación natural de la preservación de la escala, me explico:
Las imágenes tienen una altura y anchura naturales y una relación entre ellos. La mayoría de los navegadores conservarán esta relación si tanto el ancho como el alto están configurados en automático. Puede controlar el ancho deseado con min-width y max-width, en este caso haciendo que siempre se escale hasta el ancho completo del elemento principal, incluso cuando se escale más allá de su ancho natural.
(También se puede utilizar max-width y max-altura del 100% para evitar que la imagen de la que revienta hacia fuera de las fronteras del elemento padre, pero nunca escalar más allá de sus dimensiones naturales)
Ahora puede controlar el escalar ajustando el tamaño de fuente en # contenido a escala. 1.1em es aproximadamente igual a la escala (1.1)
Esto tiene algunos inconvenientes: el tamaño de fuente anidado en el ccsme se aplica de manera recusiva.Es decir, si usted tiene:
<style type="text/css">
div{
font-size: 16px;
}
span{
font-size: 0.5em;
}
</style>
<div>
<span>
<span>
Text
</span>
</span>
</div>
Usted va a terminar con el "texto" en la prestación de 4 píxeles en lugar del 8 píxeles que cabría esperar.
Aquí hay [un contenedor JS para que todos puedan experimentar] (http://jsbin.com/izicog/3/edit), con [Stylus] (http://learnboost.github.com/stylus/) como el lenguaje de estilo. También hay una [versión simple de CSS] (http://jsbin.com/ohosaw/1/edit). –
Algunas referencias sobre transformaciones CSS: [una demostración de rotar, sesgar y escalar] (http://www.zenelements.com/blog/css3-transform/). Mozilla Developer Network en ['transform'] (https://developer.mozilla.org/en-US/docs/CSS/transform) y [' transform-origin'] (https://developer.mozilla.org/ en-US/docs/CSS/transform-origin) propiedades. –
así que permítanme aclarar esto: quiere transformar el elemento hijo y, al hacerlo, quiere que CSS cambie la altura y el ancho de los padres. ¿Derecha? Si es así, entonces no hay child-> to-> parent, es decir, herencia jerárquica hacia atrás/hacia arriba en CSS. –