Reemplazar imagen con otra al achicar pantalla CSS

[juan_salinas_aedo]

Hola a todos, les explico mi problema:

En una web responsive tengo una imagen con un logo muy grande, y necesito que al achicar la pantalla (o en una pantalla de tablet - smartphone) la imagen en cuestión se cambie por otra, esto se puede hacer desde css??

Mi idea es mas o menos así:

@media screen and (max-width: 500px){
.foto_logo{
background:url(logo2.png);
width:100%;
height: auto;
}


Obviamente, este método no funciona, que puedo hacer?

Muchas gracias!!

[xfxstudios]

el metodo funciona pero no todos tienen las mias resoluciones asi que te recomendaria utilizar una libreria php que detecte el dispositivo y por ende configure la clase a cargar, esta es si mal no recuerdo Mobile Detect master, esta te detecta si la persona visita desde un PC, tablet o Smartphone

[ArturoGallegos]

Hombre que te complicas, con CSS tienes 3 opciones

1.- incrusta en html todas tus imagenes y segun la resolucion vas mostrando una u otra, esto seria mas o menos asi:

Código HTML:

<a href="#" class="logo">
    <img src="img-t1.jpg" alt="" class="width1">
    <img src="img-t2.jpg" alt="" class="width2">
    <img src="img-t3.jpg" alt="" class="width3">
</a>
 

Código CSS:

.logo img{display:none;}
.logo .width1{display:block;}
@media (max-width:960px){
    .logo .width2{display:block;}
    .logo .width1{display:none;}
}
@media (max-width:760px){
    .logo .width3{display:block;}
    .logo .width2{display:none;}
}
 

2.- con css ve cambiando el tamaño de la imagen:

Código CSS:

@media (max-width:960px){
    .logo img{width:120px;height:auto;}
}
@media (max-width:760px){
    .logo img{width:90px;height:auto;}
}
 

3.- lo mismo que ya planteaste, solo que hay que utilizar un div, un h1, u otro elemento para asignarle el logo como background, opcionalmente podrias agregar background-size para no cambiarla a cada rato.

[pzin]

Un caso para usar imágenes responsivas.

Código HTML:

<img 
  sizes="(min-width: 700px) 468px, 90vw"
  srcset="
    normal.jpg 468w,
    [email protected] 704w,
    [email protected] 938w"
>
 

Con su correspondiente polyfill. En Chrome anda incluso sin eso ya.