Cambiar imágenes web responsive

Estoy realizando una web responsive y quiero que cuando la pantalla sea un monitor se cargue una foto predeterminada como logo, pero si cambio a tablet o a móvil se carguen otras. ¿Cómo podría hacerlo? Creo que es con el CSS3 pero no encuentro la solución por ningún lado.

1 Respuesta

Respuesta
1

Las consultas en css son muy fáciles.

.MyClass123{
content:url("");
}

y en tu web:

<img class="MyClass123" />

Y ya esta, ya puedes cambiar la url mediante responsive en css.

Ten en cuenta que eso solo funciona en:

Chrome 14.0.835.163
Safari 4.0.5
Opera 10.6

Y superiores.

Otra opción, mucho más compatible es hacerlo mediante un Background.

Clases:

/* ALL */

@media (min-width : 1024px) {

.mifondo { width:100px; height: 100px; backgroud:url(nimágenes/fotogrande.jpg) no-repeat;}

}

/*TABLET*/

@media (max-width: 1023px) and (min-width : 728px) {

.mifondo { width:75px; height: 75px; backgroud:url(imágenes/fotomedia.jpg) no-repeat;}n

}

/*MÓVIL*/

@media (max-width: 727px) and (min-width : 480px) {

.mifondo { width:50px; height: 50px; background:url(imágenes/fotopeque.jpg) no-repeat;}

}

Archivo:

<div class="mifondo"></div>

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas