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

Question

从左侧调整图像大小时（使用 "n"、"w"、"ne"、"sw" 或 "nw" 句柄），父级的左侧和顶部位置不受影响，导致错误行为，可以在以下演示中看到：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;
}

Answer 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%，然后您可以调整父级的大小。希望对您有所帮助。

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

jquery ui - issue with resizable image within a div

jquery-ui

resizable