Resizing an image inside a container dynamically using jQuery

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 (text content editor). My problem:

If the user inserts an image with a resolution of 2000 pixels and a resolution of 2000 pixels, the maximum width of the container is 1000 pixels. Then it will look like this:

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

(I’m sorry, I’m still developing it on my local host and have not yet found a web host, so I can’t give you a direct link to the demo).

Well, the container can still be resized, that's right, the image size is always 2000 pixels × 2000 pixels. My question is: is it possible, when I resized the "content_container", the image will automatically resize and fit the width of the container?

If so, how to do it?

If not, is there another solution for this?

The code

Prior to TinyMCE 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 the content (for example, insert an 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 based on CSS. Have you tried applying a class to your image like this?

.fluid-img{width:90%;}

And your image:

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

( Chrome).

Answer 2

:

JavaScript:

/* Start Image Resize Code */
function image_resize() {
    $("img").each(function () {

        /* Max width for the image */
        var maxWidth = 230;

        /* Max hieght for the image */
        var maxHeight = 230;

        /* Used for aspect ratio */
        var ratio = 0;

        /* Current image width */
        var width = $(this).width();

        /* Current image height */
        var height = $(this).height();

        /* Check if the current width is larger than the max */
        if (width > maxWidth) {

            /* Get ratio for scaling image */
            ratio = (maxWidth / width);

            /* Set New hieght and width of Image */
            $(this).attr({
                width : maxWidth,
                height : (height * ratio),
                alt : "your-alt-text-you-can-remove-this"
            });
            /* Reset height to match scaled image */
            height = (height * ratio);
            /* Reset width to match scaled image */
            width = (width * ratio);
            /* Check if current height is larger than max */
            if (height > maxHeight) {

                /* Get ratio for scaling image*/
                ratio = (maxHeight / height);

                /* Set new height and width */
                $(this).attr({
                    height : maxHeight,
                    width : (width * ratio),
                    alt : "your-alt-text-you-can-remove-this"
                });
            }
        }
    });
}
/* End Image Resize Code */

/* How to use with DOM Ready */
$(document).ready(function () {

    /* Call function for image resize (not for a Webkit browser) */
    image_resize();
});

/* How to use with window load (for Webkit browser like Safari and Chrome) */
$(window).load(function () {
    image_resize();
});

/* How to use on Window resize */
$(window).resize(function () {
    image_resize();
});