Permalink: http://www.treeweb.es/u/483/
10/11/2010
Thumbnails e imágenes en miniatura
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.
Puedes descargar el archivo original desde
/TreeWeb/Articulos/HTML-y-CSS/Thumbnails-e-imagenes-en-miniatura/vista_previa.html.
0
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
3 <html>
4 <head>
5 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
6 <style type="text/css">
7 .vista_previa {
8 /* El contenedor se ajusta al contenido flotante */
9 overflow:auto;
10 _height:100px; /* Guarrería para ie6 */
11 }
12
13 .vista_previa .cuadro {
14 /* Flotar a la derecha y evitar desbordamiento */
15 float:left;
16 overflow:hidden;
17 /* Estilos */
18 padding:15px; /* MARGEN Margen de cada cuadro */
19 width:100px; /* ANCHO_IMAGEN */
20 }
21
22 .vista_previa .imagen {
23 border:solid silver 1px;
24 height:100px; /* ALTO_IMAGEN */
25 background-position:center center; /* Centrado de imagen*/
26 background-repeat:no-repeat;
27 }
28
29 .vista_previa .descripcion {
30 height:30px; /* Fija una altura de unas dos líneas */
31 overflow:hidden; /* Evita el desbordamiento */
32 /* Estilos */
33 font-size:12px;
34 font-family:Arial;
35 text-align:center;
36 }
37 </style>
38 </head>
39 <body>
40 <div class="vista_previa">
41 <div class="cuadro">
42
43 <div class="imagen" style="background-image:
44 url('1.jpg')">
45 </div>
46 <div class="descripcion">
47 Primera imagen de la lista
48 </div>
49 </div>
50 <div class="cuadro">
51 <div class="imagen" style="background-image:
52 url('2.png')">
53 </div>
54
55 <div class="descripcion">
56 Segunda imagen de la lista
57 </div>
58 </div>
59 <div class="cuadro">
60 <div class="imagen" style="background-image:
61 url('3.png')">
62 </div>
63 <div class="descripcion">
64 Tercera imagen de la lista
65 </div>
66
67 </div>
68 <div class="cuadro">
69 <div class="imagen" style="background-image:
70 url('4.png')">
71 </div>
72 <div class="descripcion">
73 Cuarta imagen de la lista
74 </div>
75 </div>
76 <div class="cuadro">
77 <div class="imagen" style="background-image:
78 url('4.png')">
79 </div>
80 <div class="descripcion">
81 Cuarta imagen de la lista
82 </div>
83 </div>
84 <div class="cuadro">
85 <div class="imagen" style="background-image:
86 url('4.png')">
87 </div>
88 <div class="descripcion">
89 Cuarta imagen de la lista
90 </div>
91 </div>
92 <div class="cuadro">
93 <div class="imagen" style="background-image:
94 url('4.png')">
95 </div>
96 <div class="descripcion">
97 Cuarta imagen de la lista
98 </div>
99 </div>
100 <div class="cuadro">
101 <div class="imagen" style="background-image:
102 url('4.png')">
103 </div>
104 <div class="descripcion">
105 Cuarta imagen de la lista
106 </div>
107 </div>
108 <div class="cuadro">
109 <div class="imagen" style="background-image:
110 url('4.png')">
111 </div>
112 <div class="descripcion">
113 Cuarta imagen de la lista
114 </div>
115 </div>
116 <div class="cuadro">
117 <div class="imagen" style="background-image:
118 url('4.png')">
119 </div>
120 <div class="descripcion">
121 Cuarta imagen de la lista
122 </div>
123 </div>
124 <div class="cuadro">
125 <div class="imagen" style="background-image:
126 url('4.png')">
127 </div>
128 <div class="descripcion">
129 Cuarta imagen de la lista
130 </div>
131 </div>
132 <div class="cuadro">
133 <div class="imagen" style="background-image:
134 url('4.png')">
135 </div>
136 <div class="descripcion">
137 Cuarta imagen de la lista
138 </div>
139 </div>
140 <div class="cuadro">
141 <div class="imagen" style="background-image:
142 url('4.png')">
143 </div>
144 <div class="descripcion">
145 Cuarta imagen de la lista
146 </div>
147 </div>
148 <div class="cuadro">
149 <div class="imagen" style="background-image:
150 url('4.png')">
151 </div>
152 <div class="descripcion">
153 Cuarta imagen de la lista
154 </div>
155 </div>
156 </div>
157 </body>
158 </html>
159
Nueva plantilla 'Green Solutions' del Plan Marketing de 195 €.
Nuevo diseño 'Pack básico' del Plan Marketing + Calendario de empresa + Catálogo de productos.
)
