Changing image src depending on screen size

by

This one is working for me. I don’t know if you’re familiar with this tag but it doesn’t even need CSS.

<picture>
    <source media="(min-width: 900px)" srcset="https://stackoverflow.com/BigImage.png">
    <source media="(min-width: 480px)" srcset="https://stackoverflow.com/MediumImage.png">
    <img src="https://stackoverflow.com/questions/30460681/OtherImage.png" alt="IfItDoesntMatchAnyMedia">
</picture>

In this case “BigImage” Would show when the device width is more than 900px. “MediumImage” when its’s more than 480px and “OtherImage” If It’s less than 480px. If you had “max-width: 900px” instead of min-width, it would also show when the width is more than 900px.

Hope it helps!

More Related Contents:

  1. Vertically center element on HTML page with some content on top (Bootstrap)
  2. Bootstrap 4 Carousel “Half of previous”
  3. Importing CSS and Bootsrap in HTML code
  4. Bootstrap column on mobile positions
  5. How to vertically center a container in Bootstrap?
  6. `col-xs-*` not working in Bootstrap 4
  7. How do you get centered content using Twitter Bootstrap?
  8. How to remove the gutter (spacing) between columns in Bootstrap?
  9. Bootstrap 4 Cards of same height in columns
  10. Gap in Bootstrap stacked rows
  11. Is inside block correct?
  12. Hiding elements in responsive layout?
  13. How to vertically center a Bootstrap carousel-caption?
  14. Exclude menu item from the collapse of bootstrap 3 navbar
  15. Align the form to the center in Bootstrap 4 [duplicate]
  16. Is it possible to set a background in a bootstrap column that oversizes the div? [duplicate]
  17. Table headers position:sticky and border issue
  18. Use Fieldset Legend with bootstrap
  19. Same height column bootstrap 3 row responsive
  20. Bootstrap navbar link color won’t change
  21. Bootstrap Grid, do I need a container?
  22. Change Bootstrap input focus blue glow
  23. Bootstrap 3 grid, does it *really* matter how many columns are in a row?
  24. Bootstrap 5 layout for different sizes cards – like Pinterest
  25. How to implement a Navbar Dropdown Hover in Bootstrap v4?
  26. How can I make Bootstrap 4 columns all the same height? [duplicate]
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Why is my .sticky-top class not working in Bootstrap 4?
  29. Sticky footer with flexbox
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment