Question 188015 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – change an image file based on screen size using min-width

I need this to change from the current image file to a desktop image when the screen size reaches a minimum width of 375px . im using tailwind css as my pre processor.

 <img src="images/bg-curve-mobile.svg" />
Tags:

2

Answers


  1. 0

    While this can also be done using JS, here’s a css solution that works. You can replace the url with the file paths of the images in your project.

    html:

    <div class='container'>
  <img />
</div>

    css:

    
img{
  display: block;
  width: 100%; // this makes our image responsive. 
  
  
  content: url(url_pc)
}



@media only screen and (max-width: 375px) {
  body {
    background-color: lightblue;
  }
  img{
    content: url(url_mobile)
  }
}
    Login or Signup to reply.
  2. 0

    Resolution switching can be done using the srcset and sizes attributes. (However, this is defeated on displays that have a pixel density of 2.) See the MDN article Responsive images for more info.

    <img
  srcset="images/bg-curve-mobile.svg 375w, images/bg-curve-desktop.svg 800w"
  sizes="(max-width: 375px) 375px, 800px"
  src="images/bg-curve-desktop.svg"
  alt="">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search