Folhas de Estilo para Web
dicas & macetes CSS

Imagens & legendas

Em HTML não existe um elemento (tag) específico que permita inserir uma imagem com respectiva legenda em um documento web. Um elemento com esta característica foi proposto quando dos estudos para as recomendações do HTML3 (Ver proposta), mas não chegou a ser implementado nem mesmo no HTML4. A seguir mostro uma maneira de simular com CSS o efeito de figura com legenda:

<div class="figura">
  <p><img src="eiffel.jpg" width="136"
    height="200" alt="torre Eiffel">
  <p>Modelo da torre
    Eiffel no Parque Mini-France
</div>

A seguir estilize a classe "figura" para formatá-la como você desejar. Por exemplo: para posicionar a figura à direita, em uma largura igual a 25% da largura do texto que a circunda escrevemos as regras CSS abaixo:

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

Na verdade somente as duas primeiras declarações (float e width) são necessárias, as demais foram acresentadas apenas com fins decorativos.

Imagem escalÁvel

Há um problema com este exemplo que mostrei acima. A imagem tem uma largura total fixa e de 136px e a DIV que a contém tem uma largura de 25% da largura do texto que a circunda. Experimente ir diminuindo a largura da janela do seu navegador e observe a figura da torre Eiffel. Você notará que a partir de determinado momento a imagem "sairá para fora da DIV".

Se você conhece a largura de todas as imagens contidas no documento, poderá acresentar uma regra CSS a mais, estabelecendo uma largura mínima para a DIV, conforme mostrado abaixo:

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

Outra maneira é usar uma imagem escalável. Neste exemplo a imagem à direita é uma imagem escalável. Imagens JPEG quando distendidas perdem qualidade e degradam. Contudo se a imagem for no formato SVG, será perfeitamente escálavel e não perderá qualidade. A seguir o código que usamos no exemplo:

<div class="figura">
  <p><img class="escala" src="st-tropez.jpg"
    alt="St. Tropez">
  <p>Os fortes de Saint Tropez ao por do sol</div>

E as regras de estilo :

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

O único acréscimo em relação ao exemplo anterior foi a regra CSS para a classe "escala": ela faz com que a imagem dentro da DIV tenha o mesmo tamanho da DIV. (a área do conteúdo, dentro da borda e do padding).

Imagem com legenda em cima

Você pode colocar a legenda da imagem na parte superior usando a regra CSS para formatação como tabela. Basta acresentar aos exemplos anteriores as seguintes regras CSS:

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

O sinal '+' faz com que a regra CSS seja aplicada ao parágrafo que se segue a outro parágrafo. No nosso caso trata-se do segundo parágrafo da DIV, ou seja aquuele que contém a legenda..

(Esta técnica não funciona adequadamente em browsers mais antigos, e em especial quando for usada com imagens escaláveis.)

Imagens no XHTML

A proposta atual (Janeiro 2003) para XHTML2 prevê o elemento CAPTION para ser usado juntamente com OBJECT. Se esta proposta for aceita e tornada uma recomendação no futuro não será necessário usar uma DIV e uma CLASSE e você poderá com XHTML2 escrever a regra CSS assim:

<object data="eiffel.jpg">
  <caption>Modelo da torre
    Eiffel no Parque Mini-France
</caption>
</object>