Changing Image Src Depending on Screen Size

Changing image src depending on screen size

this is working for me:

#main-img {    height: 250px;  width:100%} 
@media screen and (max-width: 767px) {       #main-img{     background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);    } }
@media screen and (min-width: 768px) {          #main-img{           background-image: url(http://subtlepatterns.com/patterns/dark_embroidery.png);    } } @media (min-width: 992px) {            #main-img{                  background-image: url(http://subtlepatterns.com/patterns/paisley.png);      } }@media (min-width: 1200px) {         #main-img{                  background-image: url(http://subtlepatterns.com/patterns/paisley.png);     } }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"><div class="container">    <div id="main-img" /></div>

setting different images based on screen size using css

Two options to changes images to different resolutions.
First is

#upay_image{  background-image:url("http://www.w3schools.com/css/img_fjords.jpg");  background-size:100% 100%;  width:400px;  height:400px;  border:1px solid #000;}
@media(max-width: 768px){  #upay_image{  background-image:url("https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png");   }}@media(max-width: 500px){  #upay_image{  background-image:url("http://i.dailymail.co.uk/i/pix/2016/03/08/22/006F877400000258-3482989-image-a-10_1457476109735.jpg");}}

<img id="upay_image" src="">

Making images dynamically change size based on screen size

Basically give each image width of 100%. It can be inside containers of width 25% each to have 4 in a row. You can use media query so that the containers would have width of 50% for smaller screens (<768px) so that there would be 2 in a row.

#content-1 {
  height: 400px;
  width: auto;
  border-radius: 1px;
  border-style: solid;
}

.my-col {
  float: left;
  width: 50%;
}

@media only screen and (min-width: 768px) {
  .my-col {
    width: 25%;
  }
}

.responsive {
  width: 100%;
  height: auto;
  display: block;
}

<div id="content-1">
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>
  <div class="my-col">
    <img src="https://picsum.photos/200" class="responsive" width="600" height="400">
  </div>

</div>
<!-- content-1 luk -->
<div style="clear:both"></div>
don't forget to clear floats

Change LOCAL Image Source depending on screen size

Where is your stylesheet located relative to your img folder? If your site directory is built the following way:

-index.html

-/css

-/img

Then you'll want to change your code to this:

@media screen and (max-width: 767px) {   
 #main-img{
    background-image: url("../img/Well-Being-For-Kids.jpg");
 } 
}
@media screen and (min-width: 768px) {      
 #main-img{      
    background-image: url("../img/Well-Being-For-Kids.jpg");
 }
}

Replacing image based on screen size with Jquery

You need to use jquery's resize function.

Working Fiddle : https://jsfiddle.net/f0ngoLkq/1/

HTML

<div id="crew-content">
    <img id="crewimage" src="http://completewebgraphics.com/wp-content/uploads/2015/11/Mobile-Apps-Development-in-India.jpg" alt="Header Image" />
</div>

jQuery Code

$(window).resize(function(e){
   if($(window).width() < 568) {
   console.log($(window).width());
    $("#crewimage").each(function() {
      $(this).attr("src", "http://s3.amazonaws.com/libapps/customers/1633/images/icon_52143.png");
                });
            } else if ($(window).width() >= 568) {
                $("#crewimage").each(function() {
                $(this).attr("src","https://ithemes.com/wp-content/uploads/2012/07/mobile300.png");
                });                        
    }         
});

Hope this helps!

---

Related Topics