I'm just learning how to build mobile web apps in HTML5 and jQuery Mobile. The one issue I am having is making an image on a page resize itself when the size of the browser is changed. I have tried many methods posted on here but none seem to work for me. I do not want the image to be a background image.

This is what I am aiming for; having an image with menu content below. Example: [Disney (Mobile Site)](http://m.disneyworld.disney.go.com/)

When you resize the browser on the link above, the picture adapts perfectly. 

My current HTML code is layed out as follows:

```
<div id="picture">
    <img src="images/num2.jpg" id="image2">
</div>

```

My current CSS code is: 

```
img {
    width: 100%;
}

```

I've tried many variations like adding min/max-height and width to 100%/auto combinations but to no luck. 

I'm fairly new to this so if there is an answer please keep it basic!

Many thanks in advance!

\*\*

EDIT: FIXED IT!
---------------

\*\*

The issue was that I was using two stylesheets. My HTML5 page was being run on the back of jQuery Mobile which comes with its own CSS file (the scripts copied from jQuery Mobile site). All the changes I were making were on my own CSS file I had created. I solved the problem by downloading the jQuery Mobile CSS file manually and added it to my site folder, then making my changes in that same file below the default code. Silly I know, but tripped me up for ages!