Boîte de dialogue JQuery avec rapport d'aspect constant

Question

Je dois afficher une image dans une boîte de dialogue redimensionnable (jusqu'à présent, toutes les bibliothèques d'images spécifiques que j'ai essayées ne correspondent pas à mes besoins).

Tout ce que je veux faire est de maintenir le rapport d'aspect pendant le redimensionnement. Cela semble facile, mais ce n'est pas le cas.

Je pensais que quelque chose comme cela pourrait fonctionner, mais pas de dés:

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

Les pointeurs très appréciés, TKS

Answer 1

En raison de la façon dont il est accroché dans, je trouve qu'il est plus facile à faire juste le redimensionnable partie vous, comme ceci:

$("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, vous pouvez aussi détruire et recréer ... mais c'est un peu inutile, donc juste créer ci-dessus, les spécifications ify le max/min hauteur/largeur dans le redimensionnable au lieu de la boîte de dialogue si nécessaire. Ce devrait fonctionner: .parent().resizable("option", "aspectRatio", true), mais cela ne dépend pas de la façon dont les widgets sont connectés, donc la solution la plus simple est de créer simplement la taille de votre choix avec les options que vous voulez quand vous créez la boîte de dialogue.

Remarque: vous utilisez .parent() ici parce que vous voulez que le conteneur de dialogue contenant la barre de titre et votre contenu s'affichent. It's created/wrapped like this when you create the dialog.