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