Question

我希望在我的网站上实现以下调整大小的技术，以便为用户提供缩放模式的选项。它利用包装器触发其中内容的缩放。

我的代码在这里：https://codepen.io/jsprac/pen/LoMgWm

[]

橙色框表示.ui-resizable-se句柄。由于其相对于包装纸的位置，我对其移动遇到了麻烦。就我的网站而言，我将包装器的背景设置为透明；我不希望它可见。

总结：当我对div进行“非常特定的设计”缩放时，.ui-resizable-se句柄会任意移动到其边界之外（与包装程序相对应，用户看不到）。理想情况下，它将放置在“非常特定的设计”之上，并在其边界内移动/根本不移动。由于找不到解决方案，我可能不得不探索其他选择。（即关联的jquery依赖于包装器，因此，包装器是应调整大小的元素）。

在此先感谢您的见解！

Answer 1

我想出了一种解决方法；它不是最干净的代码，但是通过调整转换CSS和位置，它可以缩放所有内容。

出于我的项目目的，我需要以像素为单位调整div的大小（而不是像vh / vw这样的响应单元）。再次，此技术按比例调整大小，而与定位/使用像素无关！

我编写的初始教程对完成此工作确实很有帮助：https://css-tricks.com/scaled-proportional-blocks-with-css-and-javascript/

您还可以建立其他参数（如JQuery'Resizeable'文档-https://api.jqueryui.com/resizable/中所述），例如minWidth和minHeight。调整大小的句柄不会调整大小，因此定义最小值特别重要，这样句柄就不会变得比内容本身大/看起来有问题。对于最大值，我这样做是为了使内容的大小不能大于窗口（带有一些填充）。此外，aspectRatio必须设置为true，以便句柄不会随包装器一起移动；实际上，它的作用就好像总是按下“ Shift”键一样。

此处的工作演示：https://codepen.io/jsprac/pen/LoMgWm

$wrapper.resizable({
  aspectRatio: true, // acts as if shift key is always pressed
  // must create limits because the resize handle will remain the same! 
  minWidth: 200,
  minHeight: 200,
  // won't be able to scale as large as window
  maxWidth: windowWidth - 50, 
  maxHeight: windowHeight - 50,
  resize: doResize
});

我希望这对某人有帮助，如果我的问题不太清楚，请对不起。这是我的第一篇文章！

可调整大小div的定位问题-有没有办法限制.ui-resizable-se的移动？

1 个答案: