How to change website image depending on device screen resolution?

Asked

Viewed 33 times

0

I have a carousel in Bootstrap, and I’m trying to change his images depending on the screen resolution of the device using Javascript, but I don’t know how to make it work.

var width = screen.width;
var image1 = document.getElementsById("slide1");

if (width <= 411)
  image1.src = "../Pictures/slide2.jpg";
<img id="slide1" class="d-block w-100" src="Pictures/slide1.jpg" alt="Primeiro Slide">

I inserted an Alert inside the if to check if the condition structure worked, and Alert appeared as expected. I believe the problem lies in the way I’m trying to do it. Could someone help me?

javascript html jquery carousel

  • If you coded exactly as it is posted here in the question, it might just be a typo: instead of document.getElementsById("slide1") you should type document.getElementById("slide1"), with Element in the singular.

  • Related https://answall.com/questions/21726/como-fazer-para-mudar-a-url-de-uma-imagem-quando-a-resolu%C3%A7%C3%A3o-for-under-de-767px? Rq=1

  • No need for JS: Swap the image on smaller screens

No answers

Browser other questions tagged javascript html jquery carousel

You are not signed in. Login or sign up in order to post.