CODEWITHSUNDEEP
htmlcss
user6728960
user6728960

Reputation: 275

How to display different images in mobile and desktop devices

Hi can anyone tell me how to display differnet banner images in desktop and mobile devices.Here is my code.

HTML:

<div class="row">
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    <h2 class="careerbannertext1">Are you fanatically driven and ready to take on some of the best challenges the industry has to offer? </h2>
    <h2 class="careerbannertext2">Come join us,be inspired to do the best work of your life!</h2>       
</div>

Right now in my desktop version it is displaying this image i need to change another image in mobile version.

Upvotes: 15

Views: 96333

Answers (3)

Rechko
Rechko

Reputation: 61

You can use source element by adding a media attribute with the value (orientation: portrait) for mobile devices and (orientation: landscape) for desktop devices.

Example:

<picture>
   <source 
      media="(orientation: landscape)"
      srcset="testlandscape.png">
   <source 
      media="(orientation: portrait)"
      srcset="testportrait.png">
      
 <img src="testlandscape.png" width="100%" height="auto">
</picture>

Upvotes: 6

maťo
maťo

Reputation: 1302

I cannot remove my accepted answer, so please don't use it. The best way is using tag picture with sources, like Ron.Basco post:

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

My original accepted answer, which is not good, because images will be loaded on each device:

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

@media only screen and (max-device-width: 480px) {
  .img-responsive {
    display: none;
  }
  .img-responsive.mobile {
    display: block;
  }
}
<div class="row">
    <img src="image\bannerimages\Career.png" class="img-responsive careerpage">
    <img src="image\bannerimages\Career-mobile.png" class="img-responsive careerpage mobile">
    <h2 class="careerbannertext">LIFE AT TEKNOTRAIT</h2>
    ...       
</div>

Upvotes: 1

Ron.Basco
Ron.Basco

Reputation: 2438

you can try this one: 

<picture>
   <source 
      media="(min-width: 650px)"
      srcset="images/img1.png">
   <source 
      media="(min-width: 465px)"
      srcset="images/img2.png">
   <img src="images/img-default.png" 
   alt="a cute kitten">
</picture>

the image tag is still there so you can put a default image for the other browser that doesnt support the picture tag.

Upvotes: 68

Related Questions