Cargar imagen según la resolución de pantalla

[mikelez]

Hola tengo una duda,
Tengo dos "img src" y si la pantalla es < 720 y >320 presentar la 1ª en caso contrario presentar la 2ª
¿Como lo lo hariais?
Gracias

[pateketrueke]

¿Como lo lo hariais?

Con javascript, con php no.

[Alexis88]

Usando media queries o también con JavaScript.

Saludos

[xfxstudios]

cc amigo esta es la manera

Código CSS:

<style>
@media (max-width: 600px) {
body{
       
       background-image: (../imagen);
}
 
}
</style>
 

[mikelez]

El problema es que las imagenes llevan codigo PHP

Código:

<img src="crearthumb.php?ima=<?php echo 'imagenes/'.$imagen; ?>">

<img src="crearthumb1.php?ima=<?php echo 'imagenes/'.$imagen; ?>">

[pateketrueke]

Iniciado por mikelez

El problema es que las imagenes llevan codigo PHP

Eso no es ningún problema.

Recuerda que lo que ves en el navegador es sólo HTML, porque el código PHP ya se procesó en el servidor.

¿O cómo?

[pzin]

No es lo mismo una imagen que una imagen de fondo.

Por otro lado, existe algo llamado srcset para manejar dinámicamente las imágenes responsivas. Échale un vistazo a canisue para el soporte.

Y un artículo en A List Apart: http://alistapart.com/article/respon...es-in-practice

[xfxstudios]

igual puede con css aplicarles una clase y variar de cual se visualiza y cual no de acuerdo a la resolucion

[pateketrueke]

Pues sí, en todo caso esto no implicaría nada de programación en PHP, por lo tanto es un tema que corresponde más a HTML/CSS como siempre...

[raffskizze]

Para eso debes usar mejor javascript, puedes ayudarte de jquery si quieres para ir más rápido. En php lo único que deberás controlar es colocar los src de las distintas resoluciones y después ya con js ir mostrándolas en función de la resolución del dispositivo.
Eso sí, al cargar la página no debes mostrar ninguna imagen o una en blanco en el campo src original por que si no cargaras varias veces las imágenes.

[fede5426]

Usa content de CSS:

Código HTML:

<img src="crearthumb.php?ima=<?php echo 'imagenes/'.$imagen; ?>" alt="" />
 

Código CSS:

@media screen and (min-width:320px) and (max-width:720px){
 
    img{
        content:url("crearthumb1.php?ima=<?php echo 'imagenes/'.$imagen; ?>");
    }
    
}
 

No se cual de las 2 usaras primero y cual en la media query.. lo puse como ejemplo.

http://codepen.io/fede5426/pen/pJqgqJ

Saludos

[mikelez]

Gracias fede5426 no sabia que en el codigo css se podia poner PHP