Изменение размера изображения внутри контейнера динамически с помощью jQuery

Question

У меня есть контейнер div, и я называю его "content_container". Этот контейнер может перетаскивать и изменять его размер, используя jQuery UI . Внутри этого контейнера я реализовал TinyMCE (текстовый редактор контента). Моя проблема:

Если пользователь вставляет изображение размером 2000 x 2000 пикселей, максимальная ширина контейнера составляет 1000 пикселей. Тогда это будет выглядеть так:

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

(извините, я все еще разрабатываю его на своем локальном хосте, и я еще не нашел компанию веб-хостинга, поэтому я не могу дать вам прямую ссылку для просмотра демо).

Хорошо, размер контейнера по-прежнему можно изменять, просто размер изображения всегда составляет 2000 x 2000 пикселей. Мой вопрос: возможно ли при изменении размера «content_container» изображение автоматически изменится и уместится в ширину контейнера?

Если да, как мне это сделать?

Если нет, есть ли другое решение для решения этой проблемы?

код

До TinyMCE код контейнера:

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

После того, как пользователь вводит контент (например, вставляет изображение), контейнер становится:

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

Как видите, я могу манипулировать только классом inlineEditor.

Answer 1

Этот ответ основан на CSS.Вы пытались применить класс к своему изображению, как это?

.fluid-img{width:90%;}

И ваше изображение:

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