jQuery UI 可调整大小 : auto height when using east handle alone

Question

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

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

防止设置高度。有没有更好的方法来防止仅使用东 handle 时设置高度？

Answer 1

尝试设置宽高比和 handle 属性:

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

上面将创建一个容器，该容器将自动调整大小为 16/9 宽高比，仅在容器的东侧有一个 handle 。

以下是来自文档站点 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 对象。

代码示例

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

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

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

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