JQuery resizable：grid + aspectRatioが正しくサイズ変更されない

Question

縦横比とグリッドでJQueryのサイズ変更可能なメソッドを使用すると、X軸とY軸の異なる時間にサイズ変更が行われます。これにより、アスペクト比が時間とともに変化する可能性があります。

aspectRatio: true, 
grid: [50, 50] 

は、例えば、このJSFiddleを参照してください。 https://jsfiddle.net/gpvhduf3/

誰もがこのためのソリューションを持っていますか？

おかげ

Answer 1

それが必要250のピクセル* 150ピクセルのdivのためのように、あなたのサイズ変更が可能な要素は、アスペクト比が真の間、グリッド値は、高さと幅と同じ比率になっている必要があり、異なる幅と高さを持っているので、これが起こっていますグリッドである[50、30]

$(document).ready(function() { 
 
    $('#box').resizable({ 
 
    \t handles: 'nw, ne, sw, se, n, s, e, w', 
 
    \t aspectRatio: true, 
 
    grid: [50, 30] 
 
    }); 
 
});

#box { 
 
    position: absolute; 
 
    width: 250px; 
 
    height: 150px; 
 
    background-color: green; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<div id="box"></div>