Ver Mensaje Individual
  #10 (permalink)  
Antiguo 23/03/2015, 09:00
Avatar de NueveReinas
NueveReinas
 
Fecha de Ingreso: septiembre-2013
Ubicación: No tan Buenos Aires
Mensajes: 1.101
Antigüedad: 11 años, 3 meses
Puntos: 145
Respuesta: Imagenes redimensionadas sin perder calidad

Cita:
Iniciado por warywin Ver Mensaje
No consigo poner las imagenes bien adaptadas a la pantalla como el de la pagina que puse:

Código CSS:
Ver original
  1. .main .work{
  2.     display: block;
  3.     max-width: 262px;
  4.     max-height: 262px;
  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. }

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).

__________________
¿Te sirvió la respuesta? Deja un +1