Resizing image height and width according to device screen

Question

How can i display my image on the full screen of different devices ie 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 )

Answer 3

By default Android maintain three folders for the images with different resolution reason behind it is the use or the resolution of the Android Device on which the application gonna execute.

• hdpi image folder maintain images for the Android Broad Screen set or Android Phones with the Higher resolution.

• ldpi image folder for Lower images quality which supports by the earlier sets of the android

• mdpi image folder for medium images support

• xhdpi image folder for devices with maximum resolution.

• xxhdpi image folder for devices extra large devices(Like Google Nexus 10 need to add a 144*144px icon in the drawable-xxhdpi or drawable-480dpi folder.)

Android OS select the image it self by checking the compatible device and its resolution.