Imagenes redimensionadas sin perder calidad

[warywin]

Hola, estoy haciendo una galeria de fotos/dibujos y lo que hago es mostrarlos todos primero en forma de cuadricula.
MI PROBLEMA:
como cada foto o imagen tiene diferente resolucion y los divs de la cuadricula tienen que ser todos iguales (mismo ancho y alto), las imagenes se estiran o pierden resolucion, mi idea es intentar conseguir como lo tiene este:
http://www.kuciara.com/
Si os fijais las imagenes en tamaño real son mucho mas grande pero en las miniaturas aparecen como autorecortadas y bien ajustadas al marco. En mi plantilla tengo los divs con un ancho de 25% y altura de 250px y luego las imagenes a un 100%.

Código CSS:

.main .work{
    display: block;
    width: 25%;
    height: 250px;
    float: left;
    position: relative;
    overflow: hidden;
    
}
 
.main .work .media {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
 

Como conseguiriais ese resultado?

[NueveReinas]

¿No será que usa miniaturas ya recortadas?

[pzin]

Ahí lo que usan son imágenes cuadradas, pequeñas miniaturas de la que tú llamas originales. No son autorecortadas, son imágenes que han puesto así.

De todas formas, lo que puedes hacer es o bien ponerlas como imágenes de fondo y ajustarlas con background-size: cover o bien usar las imágenes que quieras, darles una posición absoluta dentro de un contenedor con posición relativa, moverlas al centro con top: 50%; left: 50%; y luego centrarlas con transform: translate(-50%,-50%). Luego ya ajustar el ancho a cómo las quieras tener. Y para ocultar lo que sobresale, le pones un overflow al contenedor.

[AngelKrak]

establecele un Ancho al Div y a la Imagen hasle un Width:100%; y listo

ejemplo de tu code:

.main .work{
display: block;
width: 25%;
height: 250px;
float: left;
position: relative;
overflow: hidden;
}

pues para la imagen seria

.main .work img {
width: 100%;
}

[NueveReinas]

Iniciado por pzin

Y para ocultar lo que sobresale, le pones un overflow al contenedor.

Código:

overflow:hidden;

[pzin]

Mira NueveReinas, he ahí arriba otro un ejemplo de código redundante. El de AngelKrak, que obviando que no tiene que ver su respuesta con la pregunta, flota un elemento y lo pone como elemento de bloque; los elementos flotados se computan como elementos de bloque per se.

[NueveReinas]

Iniciado por pzin

Mira NueveReinas, he ahí arriba otro un ejemplo de código redundante. El de AngelKrak, que obviando que no tiene que ver su respuesta con la pregunta, flota un elemento y lo pone como elemento de bloque; los elementos flotados se computan como elementos de bloque per se.

Muchas gracias por el dato

[warywin]

Gracias por la info, respecto a pzin, y si uso algun script que te dejan recortar la imagen con un "crop" o algo por el estilo tipo facebook cuando cambias de imagen.
Luego os cuento como me va.

[warywin]

No consigo poner las imagenes bien adaptadas a la pantalla como el de la pagina que puse:

Código CSS:

.main .work{
    display: block;
    max-width: 262px;
    max-height: 262px;
    float: left;
    position: relative;
    overflow: hidden;
    
}
 
.main .work .media {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
 

lo he cambiado por el max-width y max-height al tamaño real de las imagenes pero cuando encoges la ventana del navegador y dependiendo del tamaño de la pantalla hay margenes en blanco. Mi conclusion es que tendria que ser con porcentajes pero perderia resolucion como me pasaba antes, que si que se adaptaban bien pero llegaban a ser mas anchas a veces que las propias fotos originales.

[NueveReinas]

Iniciado por warywin

No consigo poner las imagenes bien adaptadas a la pantalla como el de la pagina que puse:

Código CSS:

.main .work{
    display: block;
    max-width: 262px;
    max-height: 262px;
    float: left;
    position: relative;
    overflow: hidden;
    
}
 
.main .work .media {
    width: 100%;
    height: 100%;
    vertical-align: middle;
}
 

lo he cambiado por el max-width y max-height al tamaño real de las imagenes pero cuando encoges la ventana del navegador y dependiendo del tamaño de la pantalla hay margenes en blanco. Mi conclusion es que tendria que ser con porcentajes pero perderia resolucion como me pasaba antes, que si que se adaptaban bien pero llegaban a ser mas anchas a veces que las propias fotos originales.

Te diría que a través de las @media-queries vayas aumentando un poco más el tamaño de las imágenes en aquellas dimensiones donde haya márgenes en blanco (imagino que son espacios vacíos porque por default tienes un BG=White).

[AngelKrak]

ponle un tamaño definido al Cuadro y a la imagen un 100% y deben de ir dentro de 1 content o algo por el estilo ;) pero definele un ancho y alto al cuadro ;)

width: 336px;
height: 336px;

[warywin]

Iniciado por AngelKrak

ponle un tamaño definido al Cuadro y a la imagen un 100% y deben de ir dentro de 1 content o algo por el estilo ;) pero definele un ancho y alto al cuadro ;)

Ya esta puesto asi, mira mi codigo y lo veras. Si esta puesto por ejemplo a 262x262 si alargo el navegador o acorto las imagenes se ven bien cuadradas y buena resolucion pero a veces espacios a la derecha para completar ese sitio de imagen que no llega a 262px no se si me entendeis.

[AngelKrak]

yo entiendo que quieres algo asi no?

http://codepen.io/AngelKrak/pen/MYLYRP

[warywin]

Iniciado por AngelKrak

yo entiendo que quieres algo asi no?

http://codepen.io/AngelKrak/pen/MYLYRP

Si pero no. Yo hago eso pero cuando minimizas el navegador no esta completo todas las imagenes en la misma linea sin dejar en blanco un espacio, :(

[AngelKrak]

ya quedo como querias (actualizado) veelo de nuevo ;)

[warywin]

Iniciado por AngelKrak

ya quedo como querias (actualizado) veelo de nuevo ;)

mas o menos vas por el camino que pero sigue sin ser eso, lo que falta ahi es que al encoger la ventana del navegador las imagenes no se estrechen tanto si no que tengan siempre relacion entre anchura y altura. cuanto menos anchura...menos altura, y cuanto mas encoges la ventana pues van cambiandose a la linea de abajo ya que no caben...Me gustaria tenerlo tal cual la pagina que pase :) pero ya te digo que yo lo estoy intentando y no me sale igual

[AngelKrak]

uf uf uf, eso lo puse en pantallas menores de 480px nose si lo vistes ._. tendre k ponerlo a tablets tambien tonces jejejee xD

ya quedo amigo, ahora fijate si asi es como lo querias ._. ;)

[warywin]

Iniciado por AngelKrak

uf uf uf, eso lo puse en pantallas menores de 480px nose si lo vistes ._. tendre k ponerlo a tablets tambien tonces jejejee xD

ya quedo amigo, ahora fijate si asi es como lo querias ._. ;)

vale mas o menos en las diferentes pantallas lo tengo bien montado te comento si me da algun problema en adelante, gracias!