0

I am building a mobile app in PhoneGap using HTML5,CSS3, Javascript and Jquery-mobile.

I have an html page with an img element to display an image. The problem i am facing is that with diffrent screen size it does not display based on the screen but the actual size of the image causing images to be displayed half. Is there a way i can automate this process so that it will display based on the screen size of the device ?

<img src="img\following_followers.png" alt="" >
dev_marshell08
  • 1,051
  • 3
  • 18
  • 40

4 Answers4

0

You will have to use the CSS3 @media property. This is part of what we call "responsive" design.

There are even ready-made themes available on the internet, just search up "responsive template".

You can also take a look at this link for more information.

Qantas 94 Heavy
  • 15,750
  • 31
  • 68
  • 83
AmIt PagarIa
  • 35
  • 1
  • 11
0

This SO question may be of some help.

Technically, you can't access the screen's dimensions directly from CSS, nor can an element know about its parent's absolute dimensions without the help of JavaScript. Instead you usually express an element's dimensions relative to its parent, such as

#logo {
    width: 500px;
}

#logo img {
    width: 33%;
}

If an image's CSS height is not explicitly set or inherited, it'll scale with the width; the reverse is also true.

You can set an image to fill its parent container using width: 100% or height: 100%, but this may cause the image to overflow the container. The properties max-width and max-height can account for this. Try:

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

but be aware that most browsers by default allow a document to grow in height as necessary, so a max-height: 100% property will do very little if its parent container doesn't have some sort of restriction on its own height.

That said, Javascript can access the browser's dimensions directly with window.innerWidth and window.innerHeight. However, these properties are only set when the page initially loads, and they won't change if the browser window is resized. document.documentElement.clientWidth and document.documentElement.clientHeight are more reliable.

As always, UX libraries like jQuery and Bootstrap.js make this kind of task much easier.

Community
  • 1
  • 1
Evelyn Kokemoor
  • 326
  • 1
  • 9
0

Make sure that you're having the right meta tag. If not then add this

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Then in css

<img src="img\following_followers.png" alt="" style="width:100%;height:100%;" >
AtanuCSE
  • 8,832
  • 14
  • 74
  • 112
0

Use this in your style

 img {
height: 100%;
width: 100%;
 }
Karthigaiselvan R
  • 31
  • 1
  • 7