Hola, estoy haciendo una web con una plantilla, pero trabajar desde ahí está resultando más costoso que si la hiciese desde cero. Tengo un problema con el slide de la página de inicio.
Tengo problemas a la hora de escalar las imágenes en el slide. Se deforman cuando cambia de un formato a otro (en responsive).
La única solución que he encontrado es hacer muy ancha la imagen (que sobre mucho blanco por los dados), y así en versión ordenador me queda bien y se adapta perfectamente. El problema es cuando lo pongo en versión móvil, que ahora la imagen al hacerse pequeña queda extremadamente pequeña.
¿Se puede poner de alguna forma en el media query que se vean unas imágenes en versión móvil y otras en versión ordenador?
<!-- Slideshow --> <ul class="rslides" id="slider"> <li><img src="images/00001.jpg"</li> <li><img src="images/00002.jpg"</li> <li><img src="images/00003.jpg"</li> <li><img src="images/00004.jpg"</li> <li><img src="images/00005.jpg"</li> <li><img src="images/00006.jpg"</li> </ul> <!-- /. Slideshow -->
@media(max-width:640px){ ??? }
Gracias.
Respuestas
Al margen de las posibles soluciones basadas en librerías JavaScript, en teoría es posible hacer lo que quieres usando solamente HTML. La clave está en utilizar el atributo srcset de la etiqueta <img>. En este artículo lo explican un poco y aquí puedes ver que lo soportan todos los navegadores menos Internet Explorer.
También puedes usar el nuevo elemento <picture> de HTML tal y como explican aquí aunque es tan moderno que no todos los navegadores lo soportan (ver soporte).
@javiereguiluz