How to do a responsive image design

Question

I have the following code to display an image on the desktop.

<div class="medium-5 large-12 columns">
  <img style="padding-top: 20px;padding-left:30px" src="~/assets/img/ty-desktop.png" alt="Back" />      
</div>

I have different images which need to be displayed when the same webpage is viewed in iPad to this <div> .

How can I do that?

I tried to change class = "medium- 4" but the image is not resizing it and losing pixels. So I have created new image for iPad and I need to load that image.

Answer 1

One way is simply to hide the ipad image by default, and enable it with the media query you want to target the ipad device.

Here's a resource for media queries for various devices/orientations. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 .iPad { display: none; } /* replace with media query for ipad */ @media (max-width:800px) { .desktop { display: none; } .iPad { display: block; } } 

 <div class="medium-5 large-12 columns"> <img style="padding-top: 20px;padding-left:30px" src="http://kenwheeler.github.io/slick/img/fonz2.png" alt="Back" class="desktop" /> <img style="padding-top: 20px;padding-left:30px" src="http://kenwheeler.github.io/slick/img/fonz3.png" alt="Back" class="desktop iPad"/> </div> 

Answer 2

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

https://www.html5rocks.com/en/tutorials/responsive/picture-element/