jQuery UI redimensionable: altura automática cuando se utiliza el asa este solo

Question

tengo un jqueryui re-considerable div. Solo quiero que el ancho sea redimensionable y que la altura se mantenga automática, de modo que el div crezca o se reduzca con el contenido. Si lo configuro para que muestre solo el asa del este y use css height:auto, después de redimensionar, la altura también se establece aunque solo haya cambiado el ancho. Tengo que establecer la altura en automático en el cambio de tamaño del evento cada vez como así:

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

para evitar que se establezca la altura. ¿Hay una mejor manera de evitar que se establezca la altura cuando solo se usa el asa oriental?

Answer 1

Pruebe a establecer una relación de aspecto y la propiedad asas:

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

Lo anterior creará un contenedor que va a cambiar el tamaño automáticamente a una relación de aspecto 16/9, sólo que con una manija en el lado este de El contenedor.

Aquí está la descripción del sitio de documentación en http://jqueryui.com/demos/resizable/#option-containment:

Si se especifica como una cadena, debe ser una lista separada por fractura de cualquiera de los siguientes: 'n, e, s, w, NE, SE , sw, nw, todo '. Los identificadores necesarios se generarán automáticamente con el complemento.

Si se especifica como un objeto, las siguientes claves son compatibles: {n, e, s, w, ne, se, sw, nw}. El valor de cualquier especificada debe ser un selector de jQuery que coincida con el elemento hijo del redimensionable para usar como ese identificador. Si el identificador no es un elemento secundario del redimensionable, puede pasar el elemento DOMElement o un objeto jQuery válido directamente.

Ejemplos de código

inicializar un tamaño variable con la opción asas especificado.

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

Obtener o establecer la opción de controles, después de iniciar.

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