[SOLUCIONADO] hacer vista previa de album de fotos tipo face?

[minombreesmm]

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:

<div class="contenedor" style="height:500px;">
    <div class="foto1" style="width:50%;height:50%;overflow:hidden;">
        <img style="width:100%;"/>
    </div>
 
   <div class="foto2" style="width:50%;height:50%;overflow:hidden;">
        <img style="width:100%;"/>
    </div>
 
    <div class="foto3" style="width:33%;height:50%;overflow:hidden;">
        <img style="width:100%;"/>
    </div>
 
   <div class="foto4" style="width:33%;height:50%;overflow:hidden;">
        <img style="width:100%;"/>
    </div>
    <div class="foto5" style="width:33%;height:50%;overflow:hidden;">
        <img style="width:100%;"/>
    </div>    
 
</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

[manuparquegiralda]

En lugar de ponerlo en un elemento <img /> pon la imagen en el background de tal manera:

Código CSS:

.contenedor {
    position: relative;
    ... /* RESTO DE ESTILOS */
}
 
.contenedor > div {
    position: relative;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height:50%;
    ...  /* RESTO DE ESTILOS */
}
 
.contenedor > .foto1, .contenedor > .foto2 {
    width: 50%;
}
 
.contenedor > .foto3, .contenedor > .foto4, .contenedor > .foto5 {
    width: 33%;
}
 

Código HTML:

<div class="contenedor" style="height:500px;">
    <div class="foto1" style="background-image: url(imagen-precargada.jpg);"></div>
    <div class="foto2" style="background-image: url(imagen-precargada.jpg);"></div>
    <div class="foto3" style="background-image: url(imagen-precargada.jpg);"></div>
    <div class="foto4" style="background-image: url(imagen-precargada.jpg);"></div>
    <div class="foto5" style="background-image: url(imagen-precargada.jpg);"></div>    
</div>
 

De esta forma, la imagen quedará de fondo y cubrirá todo el div proporcionalmente quedando centrada dentro de éste. Los restos de la imagen no serán visibles, no es necesario ponerle un overflow: hidden.

Espero que te sirva.

[minombreesmm]

Excelente amigo me sirvió bastante, ya andaba yo perdido haciendo formulas de porcentajes y reglas de 3 y de 4 con diviciones para calcular la altura que deberia tener y aun asi sin tomar en cuenta aun la centrada..
gracias