Hojas de estilo
CSS pistas & trucos

Imágenes & leyendas

HTML no cuenta con un elemento que permita insertar una imagen con una leyenda o pie de foto. Se propuso una vez (ver HTML3), pero nunca se introdujo en el HTML4. Aquí presentamos una manera de simular ese elemento "figura":

<div class="figure">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="Torre Eiffel">
  <p>Modelo a escala de la torre
    Eiffel en el Parque Mini-France
</div>

Entonces, en la hoja de estilos pude usar la clase "figure" para dar formato a la figura o imagen como quiera. Por ejemplo, para hacer que flote a la derecha, en un espacio igual al 25% del ancho de los párrafos que la rodean, estas reglas conseguirán el truco:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}

De hecho, sólo las dos primeras declaraciones (float y widht) son esenciales, el resto es sólo para decorar.

Imágenes escalables

Hay un problema con esto, y el problema es que la imagen puede ser demasiado ancha. En este caso, la imagen tiene siempre 136 px de ancho y el DIV ocupa el 25% del texto que la rodea. De manera que si estrechamos la ventana, puede ocurrir que la imagen desborde el DIV (¡Inténtalo!).

Si usted conoce el ancho de todas las imágenes que irán en el documento, puede añadir un ancho mínimo para el DIV, de la siguiente manera:

DIV.figure {
  min-width: 150px;
}

Otra solución es hacer que la imagen sea escalable. Es lo que hemos hecho con la imagen que aparece a la derecha. Como puede comprobar si modifica el ancho de la ventana para que sea muy amplio, las imágenes JPEG no se adaptan muy bien, no son escalables. Pero si la imagen es un diagrama o un gráfico en formato SVG, el escalado funciona perfectamente. Este es el marcado que hemos usuado:

<div class="figure">
  <p><img class="scaled" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Saint Tropez y su
    Fuerte al atardecer
</div>

Y esta es la hoja de estilos:

div.figure {
  float: right;
  width: 25%;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}
div.figure p {
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
}
img.scaled {
  width: 100%;
}

Lo único que hemos añadido es la última regla: ella hace que la imagen sea tan ancha como ancho sea el DIV (el área dentro del borde y el padding).

Poner la leyenda o pie de foto por encima

Se puede poner la leyenda o pie de foto incluso en la parte superior, diciéndole al navegador que la figura debería formatearse como una tabla. Sólo hay que añadir estas reglas a la hoja de estilos que aparece en la sección previa:

div.figure p {
  display: table-cell;
  width: 100%;
}
div.figure p + p {
  display: table-caption;
  caption-side: top;
}

El signo '+' provoca que la regla se aplique a un P que sigue a otro P. Lo que significa en este caso que se aplique al segundo P de la figura, el que contiene la leyenda o pie de foto.

(Esta técnica puede producir algunos fallos en navegadores antigüos, especialmente cuando se combina con el escalado de imágenes, tal como he hecho aquí).

Figuras en XHTML

La propuesta actual para XHTML2 (Enero 2003) cuenta con un elemento CAPTION, que puede usarse junto con OBJECT. Si esta propuesta es aceptada, no será necesario por más tiempo usar DIV y CLASS, si no que, al menos en XHTML2 se podrá escribir:

<object data="eiffel.jpg">
  <caption>Modelo a escala de
    la torre Eiffel en el Parque
    Mini-France</caption>
</object>