Resizable

Code

$("#box").resizable({
  minHeight: 100,
  minWidth: 150,
  maxHeight: 400,
  maxWidth: 600,
  handles: "n, e, s, w, ne, se, sw, nw",
  aspectRatio: 4 / 3,
  grid: 10,
  animate: true,
  resize: function(event, ui) {
    $("#size-label").text(ui.size.width + "x" + ui.size.height);
  },
  stop: function(event, ui) {
    console.log("Final size:", ui.size, "position:", ui.position);
  }
});

// Also resize a sibling element (e.g. mirror image)
$("#image").resizable({
  alsoResize: "#image-preview"
});

Explanation

Adds eight resize handles to an element with min/max bounds and an optional aspect ratio lock. The ui object passed to event callbacks exposes size, position, originalSize and originalPosition for custom logic. Use alsoResize to keep related elements in sync, and grid to snap to fixed increments.

More jQuery UI Snippets