jQuery UI 可调整大小：仅使用东侧手柄时自动调整高度

Question

我有一个jQueryUI可调整大小的div。我只想让宽度可调整，高度保持自动，这样div就会随着内容的增减而增长或缩小。如果我将其设置为仅显示东侧手柄并使用CSS height:auto，那么在调整大小后，高度也会被设置，即使只有宽度发生了变化。我必须在每次调整大小事件中将高度设置为auto，像这样：

resize: function(event, ui) {
    $(this).css('height', 'auto');
}

如何防止高度被设置。当只使用东部手柄时，有更好的方法可以防止高度被设置吗？

- z33m

---

我会采纳你的建议... - TimS

Answer 1

尝试设置宽高比和句柄属性：

    $( "#resizable" ).resizable({
        aspectRatio: 16 / 9,
                    handles: 'e'
    });

以上代码将创建一个容器，该容器将自动调整为16/9的宽高比，并且只有容器东侧有一个手柄。

以下是来自文档站点http://jqueryui.com/demos/resizable/#option-containment的描述：

如果指定为字符串，则应为逗号分隔的以下任何列表：'n, e, s, w, ne, se, sw, nw, all'。插件将自动生成必要的手柄。

如果指定为对象，则支持以下键：{ n, e, s, w, ne, se, sw, nw }。任何指定的值都应是可用作该手柄的可调整大小的子元素的jQuery选择器。如果手柄不是可调整大小的子元素，则可以直接传入DOMElement或有效的jQuery对象。

代码示例

使用指定的handles选项初始化可调整大小的组件。

$( ".selector" ).resizable({ handles: 'n, e, s, w' });

在初始化后获取或设置句柄选项。

//getter
var handles = $( ".selector" ).resizable( "option", "handles" );
//setter
$( ".selector" ).resizable( "option", "handles", 'n, e, s, w' );

- Chris Lucian