31

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?

Jonathan Hall
  • 75,165
  • 16
  • 143
  • 189
Aarati Akkapeddi
  • 327
  • 1
  • 3
  • 7
  • 2
    Welcome - if you're new, consider reading [ask] in order to get up to speed on how to formulate good questions here. For starters, showing the code you currently have will make it tremendously easier for us to pinpoint the problem. – BoltClock Jan 09 '15 at 04:37
  • This question [may be experiencing the meta effect](https://meta.stackoverflow.com/questions/389760/was-my-edit-too-short). – Zoe Sep 25 '19 at 12:33

3 Answers3

71

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

Community
  • 1
  • 1
jmore009
  • 12,863
  • 1
  • 19
  • 34
44

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>
ekfuhrmann
  • 1,639
  • 11
  • 12
  • 1
    I usually use the CSS methods described below, but this method seems like an excellent method for feature photos when you know you want them to crop differently in different media. – russellmania Jun 15 '18 at 21:33
  • 10
    The big issue with `@media` and using `display:none;` is that the image is still being loaded. Even if you apply a mobile-first approach, you're still having larger displays load both images as opposed to 1. This method will actually only fetch the required image you need on load, and then load other size images in as the viewport changes. – ekfuhrmann Jun 19 '18 at 03:35
  • 1
    Supporting @ekfuhrmann: https://litmus.com/community/discussions/7047-does-display-none-prevent-an-image-from-loading – BaldEagle Mar 13 '19 at 00:47
  • 2
    Exactly @ekfuhrmann is correct. All the people saying to use display none are actually bad front end developers. Would not hire. Good answer ekfuhrmann! – Michael Paccione Nov 21 '20 at 04:32
4

You can use the content property to insert your image. However, images included like this could be difficult to style. (Run code snippet in full screen before resizing browser)

@media screen and (max-width: 479px) {
    div img {
        display:none;
    }
    div::before {
        content: url("https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66");
    }
}
<p>Resize this window to see image change</p>
<div>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=2bb144720a66" width="200px" />
</div>
Cedric Ipkiss
  • 5,662
  • 2
  • 43
  • 72