soy Kseso y esto EsCSS

Escalado inverso de elementos con puro Css

Haz que el tamaño de una imagen o cualquier otro elemento sea inversamente proporcional al del elemento que lo contiene. En puro Css.

Escalado inverso de elementos con puro Css

·Por Kseso ✎ 5

Esto es el típico ejemplo de aquello que a priori parece un imposible Css y sin embargo tras verlo sólo cabe darte una palmada en la frente y exclamar: ¡C**ñ!

Me refiero a lograr sólo con puro Css que un elemento vaya ajustando su tamaño de forma inversa a cómo lo haga su padre: mayor al achicar la ventana o menor a medida que la ventana crece.

¿Que no?. Mira lo sencillo que resulta.

Reescalado inverso de elementos puro Css

Para verlo en funcionamiento sólo tienes que redimensionar el div que contiene a la imagen.

imagen para demo

El secreto Css

Todo el secreto se reduce a utilizar la función Css calc() al declarar el tamaño de la imagen en la demo anterior:

img { width: calc(200px - 15%); /*prevenimos los excesos:*/ min-width: 5em; max-width: 20em; }

Breve explicación

Para quienes no pilléis el "truco", recordaros que el valor en % al ser usado en el tamaño de los elementos toma el valor del padre que contiene al elemento como base del cálculo. Así en la demo, lo que hace es restar a los 200px el 15% de la anchura de la caja padre. Cuanto más ancho el padre, mayor el valor que resta a los 200px.

Créditos y reconocimiento de autoría

La primera vez que vi esta técnica fue en este pen de Dave Rupert. El tuvo la idea y yo sólo la comparto contigo.

avatar del Editor del blog

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso