Como Montar uma Galeria de Imagens com Tamanhos Desiguais
Novo curso: Seja um freelancer!
Clique aqui para mais informações
Se você já montou uma galeria de imagens para algum website, provavelmente tenha usado a propriedade float
CSS. Porém, quando trabalhamos com float
, há um problema fundamental: quando há imagens ou elementos de tamanhos diferentes, é possível que alguns dos itens não quebrem a linha corretamente.
Download dos Arquivos de Exemplo
Vamos usar a galeria de fotos abaixo como exemplo:
<ul>
<li>
<a href="#"><img src="imagem1.jpg" alt="Imagem 1"></a>
<p>Legenda teste</p>
</li>
<li>
<a href="#"><img src="imagem2.jpg" alt="Imagem 2"></a>
<p>Legenda mais comprida que quebra a linha</p>
</li>
<li>
<a href="#"><img src="imagem3.jpg" alt="Imagem 3"></a>
<p>Outra Imagem</p>
</li>
<li>
<a href="#"><img src="imagem4.jpg" alt="Imagem 4"></a>
<p>Legenda teste</p>
</li>
<li>
<a href="#"><img src="imagem5.jpg" alt="Imagem 5"></a>
<p>Legenda teste</p>
</li>
<li>
<a href="#"><img src="imagem6.jpg" alt="Imagem 6"></a>
<p>Legenda teste</p>
</li>
</ul>
Usando float
, teríamos um código semelhante a este:
body {
background: #CCC;
}
.galeria {
background: #FFF;
max-width: 50em;
padding: 1.5em;
margin: 2em auto;
list-style: none;
}
.galeria li {
float: left;
width: 23%;
margin: 1%;
background: #EEE;
}
.galeria a {
display: block;
}
.galeria img {
max-width: 100%;
display: block;
margin: 0 auto;
}
.galeria .legenda {
background: #333;
color: #FFF;
padding: 0.2em;
text-align: center;
}
/* classes que finaliza a flutuação */
.grupo:before,
.grupo:after {
content: " ";
display: table;
}
.grupo:after {
clear: both;
}
Veja como a galeria "quebra". Isso acontece porque float
funciona ocupando o primeiro espaço disponível depois do maior item da linha anterior. Em uma galeria de fotos com itens de tamanhos desiguais, os espaços que ficam disponíveis nas linhas seguintes da galeria são irregulares, o que causa problemas de posicionamento.
Uma das maneiras de se corrigir isso seria colocar um elemento com a propriedade clear
depois de cada linha da galeria (finalizando a flutuação após cada linha). Isso, porém, exige manutenção extra e não oferece nenhuma praticidade (principalmente se estamos trabalhando com uma galeria gerada automaticamente por programação).
Uma alternativa neste tipo de caso é utilizar a propriedade display: inline-block
. O valor inline-block
tem todas as vantagens de um elemento bloco, como renderização correta de margens e bordas, mas com algumas vantagens de um elemento em linha. Com isso, dispensa-se o uso da propriedade float
e ainda conseguimos trabalhar com alinhamento vertical (propriedade vertical-align
CSS).
Com poucas mudanças, é possível conseguir uma galeria mais funcional e com poucas desvantagens:
.galeria li {
display: inline-block;
vertical-align: bottom;
width: 22%;
margin: 1%;
background: #EEE;
}
/* restante do código permanece o mesmo */
A principal desvantagem é que os elementos ocupam um pouco mais de espaço que o designado, por se comportarem também como elementos em linha. Assim como elementos em linha (inline), um espaço acaba sendo adicionado após cada item da galeria (pois espaços em branco no código fonte contam neste caso, como os espaços entre palavras em um texto). Desde que isso seja levado em conta quando for feito o cálculo para espaçamento dos itens, não haverá maiores problemas.
Para este tipo de situação e muitas outras, há também as novas possibilidades trazidas pela linguagem CSS3 (módulo de layout) que aos poucos estão ganhando espaço.
Novo curso: Seja um freelancer!
Clique aqui para mais informações