javascript - 具有恒定纵横比的 JQuery 对话框

Question

我需要在可调整大小的对话框中显示图像(到目前为止，我尝试过的所有特定图像弹出库都不符合我的需要)。

我只想在调整大小时保持纵横比。听起来很容易，但事实并非如此。

我认为这样的事情可能行得通，但没有成功:

var d = $("").dialog({title:title, width:400, height:400});
d.resizable( "option", "aspectRatio", true );

非常感谢任何指点，谢谢

Answer 1

由于它的连接方式，我发现自己做可调整大小的部分最简单，就像这样:

$("div").dialog({
    title:"Title", 
    width:400, 
    height:400, 
    resizable: false
}).parent().resizable({ 
    handles: 'n,e,s,w,se,sw,ne,nw', 
    aspectRatio: true 
});​​​

You can view a demo here ，你也可以销毁并重新创建它......但这有点浪费，所以只需在上面创建它，如果需要，在可调整大小而不是对话框中指定最大/最小高度/宽度。这应该工作:.parent().resizable("option", "aspectRatio", true)，但它不是由于小部件的连接方式，所以最简单的解决方案是在创建对话框时使用您想要的选项自己创建可调整大小。

旁注:您正在使用 .parent()在这里是因为您想要包含标题栏和您的内容的对话框容器。 It's created/wrapped like this when you create the dialog .