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
Puedes descargar el archivo original desde /TreeWeb/Articulos/HTML-y-CSS/Thumbnails-e-imagenes-en-miniatura/vista_previa.html.Código
<!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('1.jpg')">
</div>
<div class="descripcion">
Primera imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('2.png')">
</div>
<div class="descripcion">
Segunda imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('3.png')">
</div>
<div class="descripcion">
Tercera imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
<div class="cuadro">
<div class="imagen" style="background-image:
url('4.png')">
</div>
<div class="descripcion">
Cuarta imagen de la lista
</div>
</div>
</div>
</body>
</html>Referencias
- Archivo html del ejemplo - /TreeWeb/Articulos/HTML-y-CSS/Thumbnails-e-imagenes-en-miniatura/vista_previa.html