How to make image responsive inside a div

Question

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!!

Answer 1

Here is the code you need to follow :

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

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

Answer 2

Remove width and height attribute from img tag and add in CSS file for this image max-width:100%; width:100%;

Answer 3

this setting the image you want to set as a background image in a div and give set the background size as cover

background-image: url('YOUR URL');
background-size: cover;