Na realidade apenas as duas primeiras declarações (float e
width) são suficientes, as demais têm efeito puramente decorativo.
Redimensionando imagens
Existe um problema com a imagem da torre Eiffel mostrada no item
anterior. Observe que ela foi definida com largura fixa de 136 px e
o elemento figure que a contém com largura igual a 30%. Se você
redimensionar a largura da janela acabara atingindo uma largura na
qual os 30% se tornam menor do que 136 px, fazendo com que a imagem
ultrapasse o container (overflow da imagem). Redimensione a janela
para uma largura pequena e observe este comportamento.
Caso você conheça a largura de todas as imagens no documento
você poderá criar uma regra CSS definindo uma largura mínima para o
elemento figure como mostrado a seguir:
figure {
min-width: 150px;
}
Forte em Saint Tropez ao por do sol
Outra técnica para evitar o overflow da imagem é redimensionar a
própria imagem, conforme fizemos com a imagem do forte St. Tropez à
direita. Você pode constatar o redimensionamento da imagem
redimensionando a janela do navegador. Imagens JPEG degradam quando
redimensionadas, o que não acontece se a imagem for um diagrama ou
um gráfico no formato SVG que
escalam muito bem e sem degradar. Observe a seguir a marcação HTML
usada no exemplo deste item:
<figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<figcaption>Forte em Saint Tropez
ao por do sol</figcaption>
</figure>
A única diferença para a folha de estilo do exemplo anterior foi
o acréscimo da segunda regra de estilo: ela define a imagem com a
largura igual a largura do elemento figure (largura dentro da área
da borda e do padding do elemento).
Imagem com legenda em cima
O mar Mediterrâneo em Cap Ferrat
A HTML prevê que o elemento figcaption seja o primeiro ou o
último elemento dentro do container e com isso, sem necessidade de
qualquer declaração CSS a legenda será posionada em cima ou embaixo
da imagem respectivamente.
Contudo independentemente da posição do elemento figcaption na
marcação podemos posicionar a legenda com uso de CSS. Neste caso
você consegue o posicionamento declarando que o elemento figure
seja renderizado como tabela sendo a imagem sua única célula e a
legenda como uma legenda de tabela (table caption). Tudo conforme
mostrado na folha de estilo a seguir:
Nesta página usamos uma borda cinza ao redor do elemento figure.
Infelizmente quando usamos a técnica do "table layout" que acabamos
de mostrar há necessidade de se definir aquela borda de forma
diferente pois, neste caso, por padrão a legenda é renderizada fora
da borda da tabela. Para resolver este problema declaramos parte da
borda no próprio elemento figcaption como mostrado a seguir:
A HTML4, ao contrário da HTML5, não prevê um elemento específico
para inserir legendas em imagens. Esta funcionalidade foi proposta
(ver HTML3), mas não
foi implementada na HTML4. Observe a seguir uma maneira de simular
o elemento figure:
<div class=figure>
<p><img src="eiffel.jpg"
width="136" height="200"
alt="Torre Eiffel">
<p>Miniatura da
torre Eiffel no
Parque Mini-France
</div>
Nas CSS use a classe "figure" para formatar o DIV.figure da
maneira que bem entender. Por exemplo: para flutuar o DIV à direita
em uma largura igual a 30% da largura dos parágrafos em volta
declare a folha de estilo mostrada a seguir:
Na realidade apenas as duas primeiras declarações (float e
width) são suficientes, as demais têm efeito puramente decorativo.
Redimensionando imagens na HTML4
Se você conhece a largura de todas as imagens do documento, para
evitar o overflow da imagem você poderá declarar uma largura mínima
para o DIV tal como mostrado a seguir:
div.figure {
min-width: 150px;
}
Forte em Saint Tropez ao por do sol
Para redimensionar a imagem de acordo com a largura de
DIV.figure (tal como fizemos com a imagem mostrada à direita),
declare o atributo CLASS e defina mais uma regra CSS de modo
semelhante ao que fizemos com o exemplo para HTML5 mostrado
anteriomente. Observe a marcação para este caso:
<div class=figure>
<p><img class=scaled src="st-tropez.jpg"
alt="St. Tropez">
<p>Forte em Saint Tropez
ao por do sol
</div>
A única diferença para a folha de estilo do exemplo anterior foi
o acréscimo da segunda regra de estilo: ela define a imagem com a
largura igual a largura do elemento DIV (largura dentro da área da
borda e do padding do elemento).
Posicionando a legenda em cima na HTML4
O mar Mediterrâneo em Cap Ferrat
Para posicionar a legenda em cima acrescente as seguintes regras
de estilos às regras mostradas nos itens anteriores:
div.figure {
display: table;
}
div.figure p + p {
display: table-caption;
caption-side: top;
}
O sinal de combinação CSS '+' casa com o elemento P que se segue
a outro elemento P. Neste caso o segundo elemento P dentro do DIV,
ou seja aquele que contém a legenda.
(Esta técnica pode "quebrar" em navegadores anteriores ao ano de
2003, especialmente quando usada para o redimensionamento da imagem
como fizemos).
Tal como vimos anteriormente a borda cinza será renderizada ao
redor da imagem somente. Para corrigir esse comportamento,
colocando a borda ao redor da imagem e da legenda
adicione as seguintes regras CSS:
