Ver Mensaje Individual
  #1 (permalink)  
Antiguo 11/03/2015, 09:15
Avatar de warywin
warywin
 
Fecha de Ingreso: octubre-2013
Mensajes: 155
Antigüedad: 10 años, 6 meses
Puntos: 1
Imagenes redimensionadas sin perder calidad

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:
Ver original
  1. .main .work{
  2.     display: block;
  3.     width: 25%;
  4.     height: 250px;
  5.     float: left;
  6.     position: relative;
  7.     overflow: hidden;
  8.    
  9. }
  10.  
  11. .main .work .media {
  12.     width: 100%;
  13.     height: 100%;
  14.     vertical-align: middle;
  15. }
Como conseguiriais ese resultado?