Question

当使用具有宽高比和网格的JQuery可调整大小的方法时，调整大小会在X轴和Y轴的不同时间发生。这可能会导致宽高比随时间变化。

aspectRatio: true,
grid: [50, 50]

请参阅此JSFiddle以获取示例： https://jsfiddle.net/gpvhduf3/

有人有解决方案吗？

由于

Answer 1

这种情况正在发生，因为你的可调整大小的元素具有不同的宽度和高度，而aspectRatio为true，网格值必须与高度和宽度的比例相同，因此对于250px * 150px div，它应该是grid：[50， 30]

$(document).ready(function() {
  $('#box').resizable({
  	handles: 'nw, ne, sw, se, n, s, e, w',
  	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>

Answer 2

您可以提供长宽比，而不是真实的。

like AspectRatio：16/9

$( "#resizable" ).resizable({
      aspectRatio: 16 / 9
    });

或

引用：http://jqueryui.com/resizable/#aspect-ratio

JQuery可调整大小：grid + aspectRatio没有正确调整大小

2 个答案: