jquery ui - div中可调整大小的图像问题答案

【问题标题】：jquery ui - issue with resizable image within a divjquery ui - div中可调整大小的图像问题
【发布时间】：2018-11-08 17:26:54
【问题描述】：

从左侧调整图像大小时（使用“n”、“w”、“ne”、“sw”或“nw”句柄）， parent 的 left 和 top 位置不受影响，导致错误行为，可以在以下演示中看到：http://jsfiddle.net/8VY52/1704/。

<div id="draggableHelper">
    <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

$('#draggableHelper').draggable();
$('#image').resizable({
    handles: "n, e, s, w, ne, se, sw, nw"
});

#draggableHelper{
  border: 5px solid black
}

img{
  border: 5px solid red;
}

【问题讨论】：

欢迎来到 Stack Overflow。如您的演示中所示，如果您将“顶部”手柄向下移动，图像会更改，但不会更改其位置或父级。您可以考虑使用alsoResize 选项：api.jqueryui.com/resizable/#option-alsoResize
另一种方法是将可调整大小分配给父级，然后将子级的宽度和高度设置为 100%。

标签： jquery-ui resizable

【解决方案1】：

您可能需要考虑这样的事情：

http://jsfiddle.net/Twisty/hukpwa3n/

HTML

<div id="draggableHelper" style="display: inline-block">
  <img id="image" src="http://www.google.com.br/images/srpr/logo3w.png" />
</div>

CSS

#draggableHelper {
  border: 5px solid black;
  padding: 5px;
  padding-bottom: 1px;
  background: red;
}

img {
  width: 100%;
  height: 100%;
  margin: 0;
}

.ui-resizable-handle {
  border: 1px solid #000;
  background: #fff;
  width: 10px;
  height: 10px;
}

.ui-resizable-se {
  right: -5px;
  bottom: -5px;
}

.ui-resizable-nw,
.ui-resizable-sw {
  margin-left: -1px;
}

.ui-resizable-nw,
.ui-resizable-ne {
  margin-top: -1px;
}

.ui-resizable-ne,
.ui-resizable-se {
  margin-right: -1px;
}

.ui-resizable-sw,
.ui-resizable-se {
  margin-bottom: -1px;
}

JavaScript

$(function() {
  $('#draggableHelper').draggable().resizable({
    handles: "ne, se, sw, nw"
  });
});

这允许<img> 是其父级的 100% 大小，然后您可以调整父级的大小。希望对您有所帮助。

【讨论】：