Pies de imágenes

El lenguaje HTML no inncluye ninguna etiqueta que permita introducir pies o títulos explicativos de las imágenes. Aunque en su momento se propuso en la especificación HTML3 finalmente no salió adelante y no se incluyó en la especificación HTML 4 vigente.

A pesar de la anterior limitación podemos conseguir introducir un título explicativo de la imagen y situarlo inmediatamente debajo de la misma utilizando CSS. El efecto sería similar al que se muestra en la zona de la derecha.

Para obtenerlo hemos tenido que crear un par de reglas CSS que se explican a continuación:

Lo primero ha sido crear una clase a la que hemos denominado imagen que flote a la derecha, tenga un margen izquierdo de 10 píxeles, un borde sólido de 1 píxel y un relleno de 10 píxeles y unas dimensiones para que el texto del pie que insertaremos posteriormente no desborde la anchura de la imagen.

Realmente lo único imprescindible, si pretendemos que la imagen deje fluir el texto sería indicar la propiedad floaty la especificación de anchura por el motivo que se ha indicado en el párrafo anterior. El resto de los elementos tienen que ver más con cuestiones estéticas.

Ahora que ya tenemos definido el estilo creamos un contenedor genérico div en el que situaremos la imagen y el texto que deseamos que figure como pie de la misma. A este contenedor genérico le aplicaremos la clase cuyas propiedades acabamos de definir.

Si ahora insertamos dentro del contenedor un párrafo con el texto del pie, este asumirá las características que tengamos definidas por defecto, por lo que tendremos que crear un nuevo selector que afecte únicamente a los párrafos que se encuentren dentro del contenedor de clase imagen para el que definiremos las características que necesitemos: en nuestro ejemplo letra cursiva, tamaño 80% del definido por defecto y alineación centrada.

Escalar automáticamente imágenes

La técnica que acabamos de plantear puede ser un interesante recurso para crear un álbum de fotos porque nos permitiría crear una serie de miniaturas con título de todas las imágenes pero, tal como hemos planteado la técnica tendremos que realizar una tarea previa de redimensionado de todas las imágenes puesto que las que fueran mayores del tamaño especificado desbordarían los bordes del contenedor genérico. 

Antes de continuar es importante señalar un principio básico que ya hemos apuntado en otros momentos, salvo en casos excepcionales es esencial realizar las modificaciones de tamaño para ajustar las miniaturas y ahorrar ancho de banda.

Hecha la salvedad anterior veamos una forma de hacer que las imágenes se ajusten automáticamente al espacio definido para el contenedor genérico. La idea es tan simple como establecer una clase que fije la anchura al 100% y aplicarla a la imagen. Al estar la imagen dentro del contenedor ésta será la referencia que se tome para calcular el tamaño. De hecho, la imagen del ejemplo tiene un tamaño real de 720 x 540 píxeles.

.escalada {width: 100%;}

Una cuestión importante es que, cuando insertamos una imagen en el documento, N|VU incluye el código con sus dimensiones y no hay que perder de vista que el código html o el estilo en línea tendrán preferencia sobre las propiedades establecidas en el estilo interno o externo. Para evitarlo y conseguir que el tamaño se ajuste automáticamente habrá que editar manualmente el código para eliminar las dimensiones.