Question

我有一个div容器，我称之为“content_container”。此容器可以使用jQuery UI拖动和调整大小。在这个容器中，我实现了TinyMCE（内容文本编辑器）。我的问题是：

如果用户插入2000像素x 2000像素的图像，则容器最大宽度为1000像素。然后它会是这样的：

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

（很抱歉，我仍然在我的localhost中开发它，我还没有找到一个网络托管公司，所以我不能给你直接链接看演示）。

好的，容器仍可调整大小，只是，图像大小始终为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">

Here's an example（在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();
});

使用jQuery动态调整容器内的图像大小

代码

2 个答案:

JavaScript代码：