adaptar una imagen a dispositivo movil

[roboty]

Necesito adaptar las imagenes para que se vean en dispositivos moviles, como lo podria hacer con php, alguna idea quizas con otro lenguaje, un saludo.

[chichote]

Eso debes hacerlo desde css, lo mas simple es trabajar una imagen al 100% o al porcentaje que requieras, y si eso no es suficiente debes trabajar con media queries.

Con php a lo mucho que llegarás es a detectar el dispositivo desde donde se ingreso.

Saludos.

[cuasatar]

Iniciado por chichote

Eso debes hacerlo desde css, lo mas simple es trabajar una imagen al 100% o al porcentaje que requieras, y si eso no es suficiente debes trabajar con media queries.

Con php a lo mucho que llegarás es a detectar el dispositivo desde donde se ingreso.

Saludos.

Perdon chichote, entre a este tema y me llamo la atención eso de media queries, ¿a que se refiere eso? nunca lo habia escuchado antes.

[chichote]

Iniciado por cuasatar

Perdon chichote, entre a este tema y me llamo la atención eso de media queries, ¿a que se refiere eso? nunca lo habia escuchado antes.

Si explicamos media queries desde lo más simple, es un método para hacer preguntas desde CSS, puedes preguntar por resoluciones de pantalla, por ejemplo, preguntar si una pantalla es menor que un tamaño especifico, y demandar una acción específica, tal y como lo harias con un IF en php. También puedes preguntar por dispositivos, como por ejemplo impresoras.

De ese modo puedes preguntar por ejemplo por el tamaño de la pantalla, y si es menor a 1024 darle un width especifico a mi div, y si es mayor otro tamaño, y asi con todas los tamaños de pantalla que existan.

Averigua sobre el concepto Responsive Design y te saldrá mucha info

Saludos.

[roboty]

Hola chichote, no acabo de entender bien si con media queries soluciona mi problema, imaginando que quiero mostrar en la pantalla una imagen que mide 300px * 300px, y a la hora de mostrar la imagen le asigno el 100%, se vera mal si el dispositivo tiene una resolucion de 1024 por decir algo.

algo como esto:

<div>
<img src='miImagen.jpg' width='100%' height='100%'>
</div>

en este caso la imagen es mas pequella que la ventana, la verdad que estoy un poco desorientado espero que me puedas orientar.

Saludos

[informacionsys]

hola

podrias hacer:

Código CSS:

img{max-width:100%;width:100% !important;}
 

Código HTML:

<img src="http://1.bp.blogspot.com/-I6SX7vSe4R4/UH4aQPIUeDI/AAAAAAAAAFs/uJ329m8hFNM/s1600/Dragon+14+-+mujer+y+dragon.jpg">
 

Entonces la imagen se adapta no a la resolucion de la pantalla si no a su maximo de tamaño, lo puedes ver simplemente minimizando el navegador

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

[JManuelMV]

Asi como lo dice ipraetoriux y chichote la mejor forma es con css y media queries.
Mira a ver si te sirve este
http://www.genbetadev.com/desarrollo-web/responsive-design-adaptar-imagenes-y-videos

[cuasatar]

Iniciado por chichote

Si explicamos media queries desde lo más simple, es un método para hacer preguntas desde CSS, puedes preguntar por resoluciones de pantalla, por ejemplo, preguntar si una pantalla es menor que un tamaño especifico, y demandar una acción específica, tal y como lo harias con un IF en php. También puedes preguntar por dispositivos, como por ejemplo impresoras.

De ese modo puedes preguntar por ejemplo por el tamaño de la pantalla, y si es menor a 1024 darle un width especifico a mi div, y si es mayor otro tamaño, y asi con todas los tamaños de pantalla que existan.

Averigua sobre el concepto Responsive Design y te saldrá mucha info

Saludos.

Muchas gracias chicote por tu respuesta. Hace rato quiero aprender a utilizar y manejar mis paginas con este concepto pero no lo tenia muy claro porque deseo hacer mis paginas sin necesidad de hacer funciones mobiles y normales por aparte. Se nota bastante sencillo pero es cuestión de estudiar mucho para lograr dominarlo al 100%