Hoje iremos aprender a alinhar imagens em HTML lado a lado de uma forma bem
simples usando a propriedade flexbox, você vai ver como fazê-lo passo a passo,
mas caso queira o código pronto para copiar e colar, está no final da página.
Exemplo
Legenda:
2 imagens por linha = 50%
4 imagens por linha = 25%
5 imagens por linha = 20%
X imagens por linha = 1/X * 100 [%]
Você só precisa por a tag <a> antes da <img> e fechá-la após a <img> acabar, por exemplo:
Exemplo
1) Adicionando HTML
<div class="row">
<div class="coluna">
<img src="imagem1" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem2" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem3" alt="descrição da imagem" style="width:100%">
</div></div>
Legenda:
Propriedade | Descrição |
---|---|
imagem | caminho URL específico da imagem |
descrição da imagem | descrição da foto, clique aqui para ler sobre importância da tag ALT |
width:100% | essa propriedade irá dizer ao site para fazer com que a imagem preencha toda a área requisitada (não é necessário editá-la) |
2) Adicionando o CSS
.coluna{
float: left;
width: 33.33%;
.row::after {
content: "";
clear: both;
display: table;
}
O valor
33.33%
determina que haverá um limite de 3 imagens por linha (33,33% = 1/3),
caso você queira retirar essa limitação, é só apagar toda a linha width.
Caso você queira determinar outro número de imagem por linha, use a porcentagem
que cada uma vai ocupar indo pela lógica de frações (1/2=50%; 1/3 = 33,33%; 1/4
= 25%; 1/5 = 20%;)2 imagens por linha = 50%
4 imagens por linha = 25%
5 imagens por linha = 20%
X imagens por linha = 1/X * 100 [%]
3) Deixando responsivo
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
Faz as três colunas se empilharem de forma distribuídas umas sobre as outras.
O valor
500px
determina que a partir das telas com valores iguais ou menos que 500px, as
images irão se empilhar, você pode alterar esse valor de acordo com a sua
necessidade.
Copiar e colar
Para quem não quer setar o CSS fora da caixa do HTML, ou seja, quer o código para copiar, colar e usar logo:
<div class="row">
<div class="coluna">
<img src="imagem1" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem2" alt="descrição da imagem" style="width:100%">
</div>
<div class="coluna">
<img src="imagem3" alt="descrição da imagem" style="width:100%">
</div></div>
<style>
.coluna{
float: left;
width: 33.33%;
.row::after {
content: "";
clear: both;
display: table;
}
</style>
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
Deixar as imagens com linkVocê só precisa por a tag <a> antes da <img> e fechá-la após a <img> acabar, por exemplo:
<div class="row">
<div class="coluna"><a href='http://url-destino'><img src=".jpg" alt="" style="width:100%"></div></a>