Media query for img src attribute

Question

How to change image in mobile view for img --> src ? I want to change to different image in mobile view using media query how to do that? I don't want to use it as background image!

<div class="item">
    <img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive">
    <div class="container">
        <div class="carousel-caption">
            <h1>Changes to the Grid</h1>
            <p>Bootstrap 3 still features a 12-column grid, but many of 
                the CSS class names have completely changed.
            </p>
        </div>
    </div>
</div>

You will need to use js or jquery $("#my_image").attr("src","second.jpg"); — krychuq, Jul 10 '17 at 11:51
why do you want to change the image? Do you want it to become smaller or should mobile users see a complete different image? — hansTheFranz, Jul 10 '17 at 11:54
You can checkout under this link https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery — krychuq, Jul 10 '17 at 11:54
@hansTheFranz i want the mobile user to see a smaller image of this or a new image to appear — Akash Dikkaram, Jul 10 '17 at 11:57
in this case I would suggest to look into responsive design. Changing the image is not the correct use case for that but it would also work. look at this example. you can make the window smaller and the image will change its width automatically https://jsfiddle.net/f0dzr5uh/ — hansTheFranz, Jul 10 '17 at 11:59
Don't need media query or js, you can use the srcset attribute : https://developer.mozilla.org/en/docs/Web/HTML/Element/Img#Example_3_Using_the_srcset_attribute — BENARD Patrick, Jul 10 '17 at 12:08

score 2 · Accepted Answer · edited Jul 10 '17 at 12:10

.img-mobile-image {
  display: none;
}

@media (max-width:767px) {
  .img-responsive {
    display: none;
  }
  .img-mobile-image {
    display: block !important;
  }
}

<div class="item">
  <img src="http://lorempixel.com/1500/600/abstract/1" class="img-responsive">
  <img src="mobile-imag-path" class="img-mobile-image">
  <div class="container">
    <div class="carousel-caption">
      <h1>Changes to the Grid</h1>
      <p>Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed.</p>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Jul 10 '17 at 12:00

You could use the following classes to switch to different images. Please adjust the break point as you prefer.

   .pc_img {
      display:none;
    }
    @media (min-width: 768px) {
      .sp_img {
        display: none;
      }
      .pc_img {
        display: inline;
      }
    }

Media query for img src attribute

2 Answers2