Estoy tratando de mostrar una imagen diferente en mi sitio web cuando se ve en computadoras y teléfonos, pero por alguna razón simplemente no funciona.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <link rel="icon" href="favicon.ico" /> <style> .image { display: block; margin-left: auto; margin-right: auto; width: 95%; } body { background-color: rgb(30, 30, 30); } </style> <script> if (screen.width < screen.height) { document.getElementById("change").src = "phone.png"; } </script> </head> <body> <div class="image"> <img id="change" src="computer.png" class="image"> </div> </body> </html>Estoy bastante seguro de que lo que hice mal es extremadamente estúpido, pero simplemente no puedo encontrarlo, si me pueden ayudar, se lo agradecería mucho.
También puedes hacerlo con css.
.d-large { display: block; } .d-small{ display:none; } @media only screen and (max-width: 600px) { .d-large { display: none; } .d-small{ display:block; } } <div class="small"> <img id="img1" src="computer.png" class="image d-large"> <img id="img2" src="phone.png" class="image d-small"> </div>Sí, Martin tiene razón, esto no es lo mejor con js.
window.addEventListener('resize', function(event) { if (window.innerWidth < window.innerHeight) { document.getElementById("change").src = "computer.png"; }else { document.getElementById("change").src = "phone.png"; } }, true);tbh yo tampoco veo el problema. Creo que, en lugar de usar esa declaración if, ¿simplemente use @mediaquery e image como imagen de fondo?
.image{ @media screen and (max-width: 700px) { background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png); } }