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

I understand the problem. But, posting some code you have will help get better answers quicker. — dheerosaur
– dheerosaur, Commented Dec 14, 2010 at 4:40

Peter Mortensen · Accepted Answer · 2016-10-30 15:57:57Z

7

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

edited Oct 30, 2016 at 15:57

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 14, 2010 at 4:40

jyoseph

5,4659 gold badges47 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

wepper Over a year ago

thanks for the input. But, that will only set the image width to 90%. If my container is 1000px, and the image width is 5000px, then the 90% image width is still above 1000px. Am I interpret your code wrongly? What if the user resize the container to 100px width, then the image will totally out of the container. (Sorry for my bad english)

jyoseph Over a year ago

Setting the width on the image to a percentage will set it to a percentage of the width of the parent container (not the original size of the image). Here is another example: jsbin.com/uxoce4/2 Where the outer most container is set to 600px. I hope I'm understanding the question correctly. Sorry if not!

wepper Over a year ago

Ohhh i see... But i cant set the <img> id, as it is rendered by tinymce. After user insert image, it will just render as: <img alt="" src="../usrXX/img/imgname.jpg">, where "alt" attribute is optional.

jyoseph Over a year ago

There is a way that you could apply this to all images. By doing .inlineEditor img{}... Here's an example: jsbin.com/uxoce4/4 -- The downside to this is you will be setting any image added (whether small or large) to a percentage based width.

wepper Over a year ago

i see. I have tried it, but it still does not solve my problem. Thanks for your time and answer =)

Community · Accepted Answer · 2020-06-20 09:12:55Z

Try this:

JavaScript code:

/* 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();
});

Collectives™ on Stack Overflow

Resize an image inside a container dynamically using jQuery

Code

2 Answers 2

5 Comments

JavaScript code:

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Code

2 Answers 2

5 Comments

JavaScript code:

Comments

Your Answer

Sign up or log in

Post as a guest

Related