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中可调整大小的图像的问题

1 个答案: