Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Paulo Mardson

Galeria mosaico width 100%

Por , em Desenvolvimento frontend

Recommended Posts

Paulo Mardson    1

Paulo Mardson
Postado

Bom tarde galera, então, estou fazendo uma galeria tipo mosaico, andei vendo algumas coisas na net e tal mas ainda não consegui deixar minha galeria como eu quero e nem sei se tem alguma solução para deixa-la correta apenas com css. E depois gostaria de deixa-la responsiva. Se alguém poder me ajudar ou soube de algum plugin Jquery que ajude neste trabalho. Bom abaixo seguem as imagens, cód. e link dela em funcionamento.

 

http://paulomardson.com.br/estudos/galeria/

 

galeria.jpg

 



<!DOCTYPE HTML>


<html>


<head>


<meta charset="iso-8859-1">


<title>Untitled Document</title>


</head>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){}); </script> <style> *{ margin: 0 auto; padding: 0; } body{ overflow: hidden; } #galeria-grid{ width: 100%; position: relative; } #galeria-grid ul{ list-style: none; display: block; width: 100%; } #galeria-grid li{ width: 200px; height: 200px; float: left; overflow: hidden; display: block; padding: 0; margin: 0; position: relative; } #galeria-grid li img{ height: 100%; position: absolute; left: 50%; margin-left: -75%; } </style> </head> <body> <div id="galeria-grid"> <ul> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> <li><a href="#"><img src="_IMG/5271521119_9fae9c9e31_m.jpg" /></a></li> <li><a href="#"><img src="_IMG/944424269_4efd0d757b.jpg" /></a></li> </ul> </div> </body> </html>


 


 


 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					







	

	

		

			
Paulo Mardson
			  

	
		
	
			 1
	
		
	

		

		

			


	
		Paulo Mardson
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			
Eu já havia visto estes exemplos, mas há pouca explicação de como foi feito o procedimento para a construção. Então fiz a desconstrução para poder entender como foi feito mas mesmo assim passaram coisas que não compreendi. Mas vlw!


			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito