Resizing image height and width according to device screen

Question

How can i display my image on the full screen of different devices i.e. auto adjusting the image according to device display?

I have tried "Width : Device-width" option but didn't succeed. Any help?

Answer 1

I found the solution for this. I follow the "@media queries" concept in my css and it done the trick for me.

Answer 2

check if this css helps your code!!

   html, body {
        width:100%; /* this is a must */
        height:100%; /* this is a must */
        margin:0;
        padding:0;
    }
    img {
        width:100%; /* this will depend on parent containers width */
        height:auto;
    }

see demo here (re-size browser width and height to see the change)