No al cierre de webs
TreeWeb::Artículos::HTML y CSS::Thumbnails e imágenes en miniatura
Permalink: http://www.treeweb.es/u/483/ 10/11/2010

Thumbnails e imágenes en miniatura

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

    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 

Referencias

Powered by TreeWeb
© TreeWeb 2010. Todos los derechos reservados