Galeria de Imágenes con CSS

Actualizado 14/07/2011

Con unas pocas líneas de CSS obtendremos una galeria de imágenes, ubicando las imágenes horizontales y verticales en cada celda:

Código CSS:

img{border:none;}
.galeria{width:505px;padding:10px 9px 10px 10px;
         margin: 0 auto;border:1px solid #eee;
         clear:both;text-align:center;overflow:auto;
         background:#F9F9F9;}
.celda{display:block;width:150px;height:150px;
       padding:7px 4px 4px;float:left;margin:3px;
       background:#E6E6E6;border:1px solid #CFCFCF;}
.h img{padding-top:20px;}

Donde:

img border:none Quita el borde azul que por defecto los navegadores colocan a las imágenes que tiene hipervínculo o enlace
.galeria determina la apariencia de toda la galeria de imágenes
.celda afecta la celda de cada imágen
.h img sirve para acomodar las imágenes horizontales

Código HTML:

<div class="galeria">
<div class="celda">
<img src="imagenvertical.jpg" width="119" height="162">
</div>
<div class="celda h">
<img src="imagenhorizontal.jpg" width="156" height="126">
</div>
</div>

Donde:

Las imágenes verticales tendran un ancho de 119 y alto de 162
Las imágenes Horizontales tienen un ancho de 156 y alto de 126
Los divs con atributo class="celda" contendran las imágenes verticales.
Para los divs que contienen imágenes horizontales se añadira la clase h de este modo, class="celda h"

Ver Ejemplo: Galería de imágenes CSS

Descargar Ejemplo: Galería de imágenes CSS

Galería Imágenes CSS + Lightbox >>