jQuery UI resizable : auto height when using east handle alone

问题

i have a jqueryui re-sizable div. I want only the width to be re-sizable and the height to remain auto, so that the div grows or shrinks with the content. If i set it to display only the east handle and use css height:auto, after resize the height also gets set even though only the width changed. I have to set the height to auto on resize event everytime like so:

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

to prevent the height from being set. Is there a better way to prevent the height from getting set when only the east handle is used?

回答1:

Try setting an aspect ratio AND the handles property:

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

The above will create a container that will automatically re-size to a 16/9 aspect ratio, only with a handle on the east side of the container.

Here is the description from the documentation site at http://jqueryui.com/demos/resizable/#option-containment:

If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. The necessary handles will be auto-generated by the plugin.

If specified as an object, the following keys are supported: { n, e, s, w, ne, se, sw, nw }. The value of any specified should be a jQuery selector matching the child element of the resizable to use as that handle. If the handle is not a child of the resizable, you can pass in the DOMElement or a valid jQuery object directly.

Code examples

Initialize a resizable with the handles option specified.

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

Get or set the handles option, after init.

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

来源：https://stackoverflow.com/questions/2634894/jquery-ui-resizable-auto-height-when-using-east-handle-alone