FOTOS Verticais E Horizontais no Pure CSS Menu

[jalbino 0]

Bom dia , anda estou muito no inicio do CSS/HTML e pretendia fazer um album de fotos com output igual ao:

 

http://www.maujor.com/tutorial/galeria-fotos/final.html

 

 

O princípio de funcionamento da galeria baseia-se em uma técnica desenvolvida pelo mestre Eric Meyer, denominada "Pure CSS Menu" que consiste em inserir um elemento SPAN dentro de um elemento LINK e manipular as propriedades display e position do elemento SPAN para obter o efeito de esconder/aparecer o conteúdo de SPAN.

Consigo reproduzir as minhas fotos atraves do redimensionamento correcto de tamanhos dos thumbnails e das fotos principais (dimensionei os thumbnails com 75 x 50px em duas colunas e as fotos com 500 x 375px) --> FUNCIONA BEM PARA AS FOTOS HORIZONTAIS!!

 

SE FOREM FOTOS VERTICAIS, APESAR DO REDIMENSIONAMENTO ESTAR CORRECTO (75/50 E 500/375), ELAS SÃO NO ENTANTO APRESENTADAS AMPLIADAS/DISTORCIDAS NA VISTA DO THUMBNAIL (É ACEITAVEL) MAS TAMBÉM NA VISTA PRINCIPAL OCUPANDO UMA ALTURA MUITO MAIOR QUE AS FOTOS HORIZONTAIS FICANDO TUDO MAL ENQUADRADO:!: !!)

 

PERGUNTO: mantendo a estrutura do album exemplificado com quadros do mesmo tamanho 500x375, como conseguir reproduzir as fotos horizontais E verticais sem distorção de tamanho e bem enquadradas?

 

Cumprimentos

Jorge

[Daniel D'Angelo 0]

cara num tem como você passar um link da sua pagina pra poder dar uma olhada e entender melhor o que acontece?

 

falo

[jalbino 0]

cara num tem como você passar um link da sua pagina pra poder dar uma olhada e entender melhor o que acontece?

 

falo

 

Ola Falo

 

Ainda nao carreguei no meu site pelo que nao tenho ainda publicado. No entanto o codigo e igual ao do http://www.maujor.com/tutorial/galeria-fotos/final.html

 

Ja descobri parte da solução pelo que o problema agora esta no codigo:

 

 

}

ul.fotos li img {

border:none;

width:75px;

height:50px;

width:auto;

 

}

ul.fotos li span img {

 

border:none;

width:500px;

height:375px;

width: auto;

[jalbino 0]

cara num tem como você passar um link da sua pagina pra poder dar uma olhada e entender melhor o que acontece?

 

falo

 

Ainda não tenho a pagina publicada. Mas talvez possas ajudar na mesma porque o codigo é igual ao da pagina:

http://www.maujor.com/tutorial/galeria-fotos/final.html (podes retirar..?)

 

A parte com:

 

ul.fotos li img {border:none; width:75px; height:50px;}

ul.fotos li span img {border:none;width:500px;height:375px;height:auto;}

 

Alterei para:

 

ul.fotos li img {border:none; width:75px;width:50px;}

ul.fotos li span img {border:none;width:500px;height:375px;width:auto;}

...

 

As fotos horizontais ocupam sempre o quadro todo sem distorcer (thumbnail e figura).

Para as fotos verticais o height:auto distorce e amplia a foto!

Assim ao trocar height --> width se for uma foto VERTICAL ocupa so parte à esquerda do quadro 75x50 (não distorce porque nao e ampliada) e também para a grande.

 

Pergunto:

1- qual o comando para posicionar ambas as figuras no meio do quadro respectivo?

 

obrigado

Jorge