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

试试这个：

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

Answer 2

这个答案是基于 CSS 的。您是否尝试过像这样将类应用于您的图像？

.fluid-img{width:90%;}

还有你的图片：

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

Here's an example（在 Chrome 中测试）。