Well Im making a web app (hopefully it will be a native app) and Im having a few issues but the newest one is this code below. Im trying to put an image in but its disorted. And looks like the picture below. As you can see its streatched down, Its trying to make it the same resolution as it is normally but i dont want it to. I want it to fit on the screen but still change sizes like it would with the code below but without distortion. The reason I need it to change resolution size on its own is because the size of a screen on a iPad is different from a iPhone. Any ideas anyone?
<div data-role="page" id="tutorials">
<div data-role="header">
<h1>iDevice Tutorials</h1>
</div>
<div data-role="content">
<p>Content Find all of the Tutorials you would need here. Everything here is categorized the best way to make it as simple as we can for everyone to find the tutorial they need.</p>
<p><img src="images/Untitled.jpg" align="right" width="100%" height="100%"></p>
</div>