Ver Mensaje Individual
  #7 (permalink)  
Antiguo 05/03/2013, 09:23
Avatar de ipraetoriux
ipraetoriux
 
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 13 años, 11 meses
Puntos: 154
Respuesta: adaptar una imagen a dispositivo movil

...haber te explico brevemente y de forma facil, hay otras formas, pero te explico la forma facil...lo ideal es siempre es colocar la imagen dentro de una capa(div), y darle a la imagen un width del 100%, entonces ocupará el ancho total de la capaen la que esta, y no del ancho total de la pantalla...

Código HTML:
Ver original
  1. <div id="contenedor-imagen">
  2. <img src="imagen.jpg" alt="" />
  3. </div>

Código CSS:
Ver original
  1. img{
  2.  max-width:100%;
  3. }
  4.  
  5. #contenedor-imagen{
  6.   width:300px;
  7.   height: auto;
  8. }
  9.  
  10. #contenedor-imagen img{
  11.   width:100%;
  12.   height: auto;
  13. }

...luego con los media querys, lo que haces es, según la resolución de pantalla modificar el width, de la capa que contiene a la imagen, y de esa forma automáticamente, la imagen se ajustará al ancho de la capa...

...entonces supongamos que quieres ajustar la imagen para distintas resoluciones de pantalla, lo que haces es modificar el width de la capa que contiene la imagen...

Código CSS:
Ver original
  1. @media screen and (max-width: 980px) {
  2.     /* propiedades CSS a aplicar en ventanas de 980px o menos */
  3.    #contenedor-imagen{
  4.        width:300px;  
  5.    }
  6. }
  7. @media screen and (max-width: 650px) {
  8.     /* propiedades CSS a aplicar en ventanas de 650px o menos */
  9.     #contenedor-imagen{
  10.        width:200px;  
  11.    }
  12. }
  13. @media screen and (max-width: 480px) {
  14.     /* propiedades CSS a aplicar en ventanas de 480px o menos */
  15.     #contenedor-imagen{
  16.        width:100px;  
  17.    }
  18. }
  19. }


...esto es muy básico, si buscas encontraras otras opciones dentro de Media Quieres para optimizar el trabajo, como así también usar % o em en lugar de pixeles..