Question

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 1

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