Ajustar el tamaño de una imagen al texto

Por lo general, usando CSS, armar un texto combinado con una imagen es bastante sencillo aunque a veces, ajustar ambas cosas se vuelve una tarea titánica.

Supongamos que tenemos dos imágenes, una de 128x128 y otra de 256x256 y que queremos usarlas como "adorno".

Usando la propiedad float, podemos colocar el texto "rodeando" la imagen, ya sea a un lado o al otro. Esto es lo que hace Blogger cuando nos pide que elijamos un diseño al subirlas pero podemos hacerlo con cualquiera, basta darle un estilo:

<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left;" /> ... el texto a mostrar ... </div>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

Lo mismo hacemos para el otro lado:

<div style="text-align: justify;"><img src="URL_imagen" style="margin-left: 10px; float: right;" />el texto a mostrar ... </div>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

Sólo invertimos los códigos, uno flota a la izquierda y tiene un margen a la derecha, el otro flota a la derecha así que tiene un margen a la izquierda pero ¿qué pasa si por cualquier motivo cambiamos el tamaño o el tipo de fuente del texto?

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

Se descalabra todo y claro, deberíamos "redimensionar la imagen para mantener el efecto. La rehacemos, la subimos otra vez ... demasiado trabajo.

También podemos "redimensionarla" usando los atributos width y height.

Basta colocar el ancho y el navegador se encargará de calcular el alto de forma automática para mantener la proporción. O colocar sólo el alto. O colocar ambos valores y cambiar esa proporción:

original = 256x256 --> 100x100
<img width="100" src="URL" />	<img height="100" src="URL" />	<img width="100" height="100" src="URL" />

<img width="50" height="100" src="URL" />	<img width="100" height="50" src="URL" />

Sea como sea, deberíamos "recalcular" el tamaño de manera individual ... sigue siendo mucho trabajo.

Sin embargo, hay una técnica explicada en JON TANgerine que nos facilita hacer esto de manera genérica, usando CSS. Para ello, en lugar de utilizar pixeles para dimensionar las imágenes, utilizaremos la unidad em lo que significa que el tamaño de la imagen tendrá una relación con el tipo de fuente del texto.

¿Cómo calculamos eso? No hay otra forma que usar la aritmética o una calculadora online.

Supongamos que estoy satisfecho con el modelo creado. Conozco dos datos, sé que la imagen debe tener 128x128 y que la fuente del texto tiene 14 pixeles. Uso una fórmula de conversión:

(1 / TamañoFuente) * AnchoImagen = AnchoImagen en unidades em
(1 / TamañoFuente) * AltoImagen = AltoImagen en unidades em

en este caso:

(1 / 14) * 128 = 9.14

Así que puedo cambiar el código a usar:

<div style="text-align: justify;"><img src="URL_imagen" style="margin-right: 10px; float: left; width: 9.14em; height: 9.14em;" /> ... el texto a mostrar ... </div>

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum arcu felis, semper sed vestibulum eget, gravida id tortor? Mauris eleifend suscipit tellus, a tempor lorem euismod eget? Maecenas porta rutrum faucibus. Pellentesque eget rhoncus est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sem est, laoreet non pharetra in, porttitor sed turpis pellentesque.

12px14px16px18pxComic Sans MSTrebuchet MSArialCourierHelveticaTimes New RomanVerdana

De esta manera, el texto y la imagen mantendrán una relación pre-establecida, sin importar ni el tipo de fuente ni el tamaño de la imagen que usemos.