Resizable

$("#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"
});