Vista de imágenes en miniatura

CSS, HTML, VISTA PREVIA, THUMBNAILS

Descripción

Las vistas de imágenes en miniatura o thumbnails son un mosaico de imágenes de tamaño reducido. Este tipo de vistas deben cargar muy rápido y son muy útiles a la hora de localizar gráficos a golpe de vista o como complemento para una galería de imágenes.
La característica más llamativa de esta maquetación es la redistribución automática de las imágenes en función del tamaño del contenedor.
También hay que destacar el centrado tanto vertical, como horizontal de la imagen dentro del cuadro. Este efecto se consigue poniendo la imagen de fondo. Para mejorar la velocidad y presentación es recomendable contar con algún script que redimensione las imágenes originales para que se ajuste a los tamaños de previsualización que estemos utilizando.

Ejemplo

Primera imagen de la lista

Segunda imagen de la lista

Tercera imagen de la lista

Cuarta imagen de la lista

Imagen enésima de la lista

Codigo


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <style type="text/css">
            .vista_previa {
                /* El contenedor se ajusta al contenido flotante */
                overflow:auto;
                _height:100px; /* Guarrería para ie6 */
            }

            .vista_previa .cuadro {
                /* Flotar a la derecha y evitar desbordamiento */
                float:left;
                overflow:hidden;
                /* Estilos */
                padding:15px; /* MARGEN Margen de cada cuadro */
                width:100px; /* ANCHO_IMAGEN */
            }

            .vista_previa .imagen {
                border:solid silver 1px;
                height:100px; /* ALTO_IMAGEN */
                background-position:center center; /* Centrado de imagen*/
                background-repeat:no-repeat;
            }

            .vista_previa .descripcion {
                height:30px; /* Fija una altura de unas dos líneas */
                overflow:hidden; /* Evita el desbordamiento */
                /* Estilos */
                font-size:12px;
                font-family:Arial;
                text-align:center;
            }
        </style>
    </head>
    <body>
        <div class="vista_previa">
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/1.jpg')">
                </div>
                <div class="descripcion">
                    Primera imagen de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/2.png')">
                </div>
                <div class="descripcion">
                    Segunda imagen de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/3.png')">
                </div>
                <div class="descripcion">
                    Tercera imagen de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Cuarta imagen de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>
            <div class="cuadro">
                <div class="imagen" style="background-image:
url('http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/4.png')">
                </div>
                <div class="descripcion">
                    Imagen enésima de la lista
                </div>
            </div>

        </div>
    </body>
</html>

Copia el código y pégalo en

Referencias

Archivo html del ejemplo - http://www.treeweb.es/__archivo__/codigo/articulos/vista_previa/vista_previa_v2.html

Comentarios