@media queries and image swapping [closed]

Question

I want the image in my site to completely change when the browser is resized.

I've been using media-queries, but I can't seem to get it right. Any thoughts/tips?

Answer 1

In the future please add code you've tried.

if it's an image tag you can use a class. Hide the second image on page load and show + hide image 1 at a certain screen size like so:

HTML

<img src="image.jpg" class="image1"/> <img src="image.jpg" class="image2"/> 

CSS

.image2{    display: none; }  @media only screen and (max-width: 500px){ //some value    .image1{      display: none;    }     .image2{      display: block;    } } 

EXAMPLE 1 - SHRINK BROWSER

OR

If it's a background-image you can simply swap the image:

HTML

<div class="example"></div> 

CSS

.example{    background-image: url("example.jpg"); }  @media only screen and (max-width: 500px){ //some value     .example{       background-image: url("example2.jpg");    } } 

EXAMPLE 2 - SHRINK BROWSER

Answer 2

This can be done using the HTML5 picture element which doesn't require CSS for changing img elements on specified media queries. If you're intrested in this approach, do be aware of its browser support which does NOT include IE, though there is a polyfill for older browsers.

<h1>Resize Window</h1> <picture>   <source srcset="https://via.placeholder.com/1400" media="(min-width: 1400px)"/>   <source srcset="https://via.placeholder.com/1200" media="(min-width: 1200px)"/>   <source srcset="https://via.placeholder.com/800" media="(min-width: 800px)"/>   <source srcset="https://via.placeholder.com/600" media="(min-width: 600px)"/>   <img src="https://via.placeholder.com/400" alt="example"/> </picture>