HTML,SCSS,BOOTSTRAP

Community feedback

• 

  Luka•820

  @LukaKobaidzePosted almost 3 years ago

  Hello!

  To change image on different media queries, you can use picture tag.

  <picture>
    <source srcset="image-mobile.png" media="(max-width: 375px)">
    <img src="image-desktop.png" alt="Image" >
  </picture>
  

  As you can see in the code, i wrote source and img tags inside picture. media attribute is just like how you write CSS media queries. If viewport width is less than or equal 375px, then image-mobile.png is going to apply, and if not, then image-desktop.png applies. You can also write more than one source with different media queries.

  Check out this source, It's about responsive images.

  Hope this is helpful xD

  Marked as helpful

  2

  ---

  

  Illyaas•700

  @Illyaas4ShowPosted over 2 years ago

  @LukaKobaidze Can I also use a div and change the background-image: url() ; at different media queries?

  1