I am trying to show a different image on my website when its seen on computers and on phones, but for some reasons it just doesn't work
<!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>
I am quite sure that what I did wrong is extremely stupid, but I just can't find it, if you can help me, I'd be very grateful
You can do it with css as well.
.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>
Yes, Martin has right, this is not the best of with 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 i dont see the problem either. I think, Instead of using that if statement, just use @mediaquery and image as background image?
.image{
@media screen and (max-width: 700px) {
background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);
}
}