Cambiar imagen en HTML5 dependiendo de las MediaQueries

Archivado
Hola buenas...

Bueno pues como dice mi enunciado estoy empezando con HTML5 y CSS3 en plan Responsive. Ahora estoy con una duda que me surge que es como cambiar una imagen por otra en las Media Queries sin tener que darle formato background.

Os pongo en materia:
Estoy haciendo un web en responsive en el cual tengo puesto un logo de 500x300px de ancho, a la hora de redimensionar el navegador se encoge a la perfección, pero lo que quiero es que cuando tenga una resolución menor a 600px cambie el logo.png por logo2.png que en vez de ser de 500x300px es de 150x150px...

Hay alguna forma de hacerlo? O tengo que hacerlo mediante el tag background? Algún JavaScript tal vez?

El problema es que el logo lleva un enlace a index y quiero que se mantenga así...

Muchas gracias de antemano.

Salud. ;)
La única forma factible sería mediante JavaScript. Si usas jQuery tienes la función resize() que de esta manera:
$( window ).resize(function() {
var width_deseado = XXX;
if ( $( window ).width() <= width_deseado )
{
    $('img.conlaclasequesea').prop('src', 'nombreimagennueva.pngojpgoloquesea');
}
});


EDIT: Googleando he visto que con css3 hay una propiedad que lo cambia peeeero no es 100% compatible con todos los navegadores:
<img class="clasequequieras"/> <!-- la imagen en el html !-->
<!-- en css !-->
.clasequequieras{
    content:url("imagen.jpg");
}
Hola gracias por contestar :D

El del JavaScript aún no lo he probado.
El del HTML5 si y no me funciona... :S

lo tengo montado de la siguiente manera:
HTML
<header>
         <h1>
            <a href="index.html">
               <img class="fade" src="img/logo.png" alt="logo" id="logotipo">      
            </a>         
         </h1>      


CSS3
@media (max-width:600px) {   
   .fade {
   content: url("../img/logo2.png")   
   }


Así lo e puesto y no me surge...

Salud. ;)
Creo que el problema es que de entrada en el html no hay que ponerle src a la imagen, porque al tener ya una source no sobreescribe la imagen por la que le indicas en css.
RC9 escribió:Creo que el problema es que de entrada en el html no hay que ponerle src a la imagen, porque al tener ya una source no sobreescribe la imagen por la que le indicas en css.


He probado como dices tú y tampoco...
Quitando el "src" y metiendo en el css lo siguiente:
.fade {
content: url("../img/logo.png")
}


Y no me muestra nada...
Uf me esta frustrando xD
Subdes escribió:
RC9 escribió:Creo que el problema es que de entrada en el html no hay que ponerle src a la imagen, porque al tener ya una source no sobreescribe la imagen por la que le indicas en css.


He probado como dices tú y tampoco...
Quitando el "src" y metiendo en el css lo siguiente:
.fade {
content: url("../img/logo.png")
}


Y no me muestra nada...
Uf me esta frustrando xD


¿Con qué navegador estás probando? Con Chrome va pero como he dicho en mi primer post no todos los navegadores lo interpretan.
Lo he probado con Chrome, Firefox y Safari...

Edito:
En Chrome si que me va!! Pero no en firefox...
Y lo que quiero es que funcione en todos...

Edit 2:
Si mantengo el src me hace el cambio en Chrome y en Safari, pero no en firefox...

Gracias :D
Aún así tengo que buscar una alternativa para el Firefox.
Al final lo he conseguido de la siguiente manera:

En el encabezado he puesto los dos logos de la siguiente forma:
<header>
         <h1>
            <a href="index.html"><img class="logo" src="img/logo.png" alt="Esepe Ele"></a>
            <a href="index.html"><img class="logo2" src="img/logo2.png" alt="Esepe Ele"></a>
         </h1>


Y en el css en cada mediaquery:
.logo2 {
      display: none;
   }


y en la que queria cambiar el logo:
.logo {
      display: none;
   }
   .logo2 {
      display: inline-block;
   }


Ha sido de la única manera que lo he conseguido.

Aún así muchas gracias.

Salud. ;)
7 respuestas
Archivado
Volver a General