How to make image responsive inside a div

css, image, responsive-design

Solution

Here is the code you need to follow :

img {
    max-width: 100%;
    height: auto;
    }

Refer : http://html5hub.com/html5-picture-element/

Problem

My code is as Follows: ``` <div class="abc"> <div class="bcd"> <a href="#"> <img class="img1" width="50" height="50"/> </a> <a> <h3>Some Text</h3> </a> </div> <div class="bcd"> <a href="#"> <img class="img1" width="50" height="50"/> </a> <a> <h3>Some Text</h3> </a> </div> <div class="bcd"> <a href="#"> <img class="img1" width="50" height="50"/> </a> <a> <h3>Some Text</h3> </a> </div> <div class="bcd"> <a href="#"> <img class="img1" width="50" height="50"/> </a> <a> <h3>Some Text</h3> </a> </div> </div> ``` How can I make the image responsive for Mobile(360X640px) and iPad(768X1024px)? Can you please give me the CSS Code? I have to give two Images in Mobile and Four in iPad in one line!!

Original source