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>

I see you have the image in paragraphs, I don't really know any HTML but could it be that the <p> brackets are forcing the image to conform to that region? Try putting a couple line breaks in to separate it from the text and then put in the image. Another thing is it may be getting distorted cause you have it at 100% width and height, I really don't know if that would affect it but it wouldn't hurt to check that out.

Naw it wouldnt make a diff, it just means that its in a paragraph and i want that for cleaness of the code. Anyways i thought it could possible work cuz the javascript or css was conflicting with it but nope... its even worse now LOL but thanks anyway, Keep tring xD

Instead of using width=100% use width=xxx px

Alright I'll try that tomorrow when it's night night fall outside xD and I can think clearly lol

I'll tell u how it goes tomorrow.

I'm guessing it's CSS that's screwing it up. Can you edit the CSS file?

Yes