title: Resize an image inside a container dynamically using jQuery
body: <p>I have a div container, and I call it &quot;content_container&quot;. This container is able to drag and resize using <a href="http://en.wikipedia.org/wiki/JQuery_UI" rel="nofollow noreferrer">jQuery UI</a>. Inside this container, I implemented <a href="http://en.wikipedia.org/wiki/TinyMCE" rel="nofollow noreferrer">TinyMCE</a> (content text editor). My problem is:</p>
  <p>If the user inserts a 2000 pixels x 2000 pixels image, the container max-width is 1000 pixels. Then it will look like this:</p>
  <pre><code> ____________________
  | Container header   |
  ----------------------
  | text [image...................image]
  |      [image...................image]
  |____________________|
  </code></pre>
  <p>(I am sorry, I am still developing it in my localhost, and I haven't found a web hosting company yet, thus I can't give you the direct link to see the demo).</p>
  <p>Okay, the container is still resizeable, just that, the image size is always 2000 pixels x 2000 pixels. My question is: Is it possible when I resize the &quot;content_container&quot;, the image will auto resize and fit into the container width?</p>
  <p>If yes, how do I do it?</p>
  <p>If no, is there another solution to solve this?</p>
  <h3>Code</h3>
  <p>Before TinyMCE, the container code:</p>
  <pre><code>&lt;div id=&quot;content_container&quot;&gt;
      &lt;div id=&quot;header&quot;&gt;The header&lt;/div&gt;
      &lt;div id=&quot;content&quot;&gt;
          &lt;div id=&quot;inlineEditor&quot;&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>After the user enters content (for example, insert the image), the container will become:</p>
  <pre><code>&lt;div id=&quot;content_container&quot;&gt;
      &lt;div id=&quot;header&quot;&gt;The header&lt;/div&gt;
      &lt;div id=&quot;content&quot;&gt;
          &lt;div class=&quot;inlineEditor&quot;&gt;
              &lt;p&gt;some text &lt;img alt=&quot;test&quot; src=&quot;../usrXX/img/imgname.jpg&quot;&gt;&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>As you can see, I can only manipulate the inlineEditor class.</p>