Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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/
/applications/core/interface/imageproxy/imageproxy.php?img=http://paulomardson.com.br/estudos/galeria/galeria.jpg&key=b01f80becd52782896402091cc1efb4b8101711de502cbca988bb1bc51763ce4" alt="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](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>Carregando comentários...