使用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中测试).