adaptar una imagen a dispositivo movil

[ipraetoriux]

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

<div id="contenedor-imagen">
<img src="imagen.jpg" alt="" />
</div>
 

Código CSS:

img{
 max-width:100%;
}
 
#contenedor-imagen{
  width:300px;
  height: auto;
}
 
#contenedor-imagen img{
  width:100%;
  height: auto;
}
 

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

@media screen and (max-width: 980px) {
    /* propiedades CSS a aplicar en ventanas de 980px o menos */
   #contenedor-imagen{
       width:300px;  
   }
}
@media screen and (max-width: 650px) {
    /* propiedades CSS a aplicar en ventanas de 650px o menos */
    #contenedor-imagen{
       width:200px;  
   }
}
@media screen and (max-width: 480px) {
    /* propiedades CSS a aplicar en ventanas de 480px o menos */
    #contenedor-imagen{
       width:100px;  
   }
}
}
 

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