wepper wepper - 1 month ago 9
jQuery Question

Resize an image inside a container dynamically using jQuery

I have a div container, and I call it "content_container". This container is able to drag and resize using jQuery UI. Inside this container, I implemented TinyMCE (content text editor). My problem is:

If the user inserts a 2000 pixels x 2000 pixels image, the container max-width is 1000 pixels. Then it will look like this:

____________________
| Container header |
----------------------
| text [image...................image]
| [image...................image]
|____________________|


(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).

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 "content_container", the image will auto resize and fit into the container width?

If yes, how do I do it?

If no, is there another solution to solve this?

Code



Before TinyMCE, the container code:

<div id="content_container">
<div id="header">The header</div>
<div id="content">
<div id="inlineEditor"></div>
</div>
</div>


After the user enters content (for example, insert the image), the container will become:

<div id="content_container">
<div id="header">The header</div>
<div id="content">
<div class="inlineEditor">
<p>some text <img alt="test" src="../usrXX/img/imgname.jpg"></p>
</div>
</div>
</div>


As you can see, I can only manipulate the inlineEditor class.

Answer

This answer is CSS based. Have you tried applying a class to your image like so?

.fluid-img{width:90%;}

And your image:

<img src="your_image.png" class="fluid-img">

Here's an example (tested in Chrome).