Ver Mensaje Individual
  #1 (permalink)  
Antiguo 02/10/2016, 18:40
minombreesmm
 
Fecha de Ingreso: agosto-2012
Ubicación: M.
Mensajes: 2.031
Antigüedad: 12 años, 3 meses
Puntos: 52
hacer vista previa de album de fotos tipo face?

Veran lo he estado haciendo de la siguiente manera..
ya ven que por ejemplo en facebook si subes 5 fotos al album
te muestra 2 arriba y 3 abajo en un contenedor, y las fotos se ven bien.
no se ven completas pero casi completas.
tiene un algoritmo de tal manera que la foto siempre se vea cubriendo todo los subcontenedores.
yo tengo asi


Código HTML:
Ver original
  1. <div class="contenedor" style="height:500px;">
  2.     <div class="foto1" style="width:50%;height:50%;overflow:hidden;">
  3.         <img style="width:100%;"/>
  4.     </div>
  5.  
  6.    <div class="foto2" style="width:50%;height:50%;overflow:hidden;">
  7.         <img style="width:100%;"/>
  8.     </div>
  9.  
  10.     <div class="foto3" style="width:33%;height:50%;overflow:hidden;">
  11.         <img style="width:100%;"/>
  12.     </div>
  13.  
  14.    <div class="foto4" style="width:33%;height:50%;overflow:hidden;">
  15.         <img style="width:100%;"/>
  16.     </div>
  17.     <div class="foto5" style="width:33%;height:50%;overflow:hidden;">
  18.         <img style="width:100%;"/>
  19.     </div>    
  20.  
  21. </div>

como veran eso forma un cuadro con 2 fotos arriba y 3 fotos abajo.
el alto del contenedor es 500px y es fijo.
el css es para escritorio y telefono.

si se fijan en el css, tengo las barras ocultas, esto es para que la imagen pueda expandirse todo el tamaño que tenga y que no salga del div.

en este caso tengo los width al 100%
quiere decir que si una imagen mide 700px de width x 50px, se va a comprimir hasta el tamaño de su div en su width pero su height sera proporcional, haciendo que el div quede en blanco en lo que sobro de altura.
si en vez de width hago el height al 100% entonces pasara lo mismo pero en vez de abajo, quedara en blanco a un lado.
la idea es que no deje espacios en blanco independientemente la proporcion de la imagen.

que si la imagen es de 100px X 20px entonces agarre el 20px para expandirlo hasta el 100% del height del contenedor y el width de la imagen quede proporcional pero que ademas el width no quede mas pequeño que su contenedor.
parece ser que son un monton de condicionales y no siempre logro cubrirlas todas.
bueno ya no se como seguirle estoy aqui por eso.
alguna idea?.
habra alguna herramienta que acomode eso ya.

de antemano gracias
__________________
a veces creemos que es algo básico pero al profundizar nos damos cuenta que estábamos tocando solo la cola de la culebra