Listar imagens lado a lado independente do tamanho.

[RedHot66 2]

Galera é o seguinte, to com um upload de fotos em php e listo as mesmas na página web.

Só que a minha saida esta sendo assim :

IMAGEM | IMAGEM | IMAGEM | IMAGEM
       |        |        | IMAGEM
IMAGEM |        |        |
IMAGEM | IMAGEM | IMAGEM | IMAGEM

A minha saida ta assim, pois cada imagem contém um tamanho diferente..

Queria saber se tem como fazer um css, que independente do tamanho da imagem, ele sempre vai listar assim :

Sabendo que posso ter varias imagens , e por isso to fazendo ele ser listado em 4 colunas.

IMAGEM | IMAGEM | IMAGEM | IMAGEM
IMAGEM | IMAGEM | IMAGEM | IMAGEM
IMAGEM | IMAGEM | IMAGEM | IMAGEM
IMAGEM | IMAGEM | IMAGEM | IMAGEM

[Public2004 79]

Se for com relação a altura uma alternativa seria definir um min-height no CSS ou, através de JS para que as colunas tenham sempre a mesma altura respeitando a da maior imagem. Uma outra solução seria a utilização de um plugin jQuery para listar as imagens em colunas uma debaixo da outra independente da altura, em ambos os casos, largura padrão.

 

Att.

[RedHot66 2]

Opa, obrigado pela resposta.

Poderia dar um exemplo? se nao for muito incomodo..

Desde ja, agradeço !

[victor campaner 0]

Da pra fazer so com CSS, vai ficar com efeito mosaico.

usando o column-count você define quantas colunas sua galeria vai ter.

Lembrando que a imagem precisa de ter width:100% definada.

(se você for colocar a img dentro de uma div você precisa definir display:inline-block pra div;)

o html:

 

<div class="container">

 

<img src="....." alt="img-1">

<img src="....." alt="img-2">

<img src="....." alt="img-3">

<img src="....." alt="img-4">

<img src="....." alt="img-5">

<img src="....." alt="img-6">

 

........

 

 

</div><!-- container -->

 

 

e o CSS:

 

.container{

width: 500px;

overflow:hidden;

line-height:0;

-webkit-column-count: 4;

-webkit-column-gap: 0px;

-moz-column-count: 4;

-moz-column-gap: 0px;

column-count: 4;

column-gap: 0px;

}

.container img{

width: 100%;

}

resultado: