jQuery UI可调整大小：单独使用向东句柄时的自动高度

Question

我有一个jqueryui可调整大小的div。 我只希望宽度可以调整大小，而高度保持自动，以便div随内容增加或缩小。 如果我将其设置为仅显示东向手柄并使用css height:auto ，则在调整大小后，即使仅更改了宽度，也将设置高度。 我必须每次将高度设置为自动在调整大小事件时像这样：

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

以防止设置高度。 当仅使用东向手柄时，是否有更好的方法来防止高度设置？

Answer 1

尝试设置长宽比和handles属性：

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

上面的代码将创建一个容器，该容器将自动调整为16/9的长宽比，仅在容器的东侧有一个手柄即可。

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

如果指定为字符串，则应为以下任何一个逗号分隔的列表：“ n，e，s，w，ne，se，sw，nw，所有”。 必要的句柄将由插件自动生成。

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

代码示例

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

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

初始化后获取或设置handles选项。

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