title: Drag and zoom image within bounding box
body: <p>I'm trying to replicate pinch and drag on an image in a mobile web browser.  I can do this with hammerjs, but I am not able to figure out how to keep the image in the bounding container.  For example, if you are zoomed in really far, you should be able to pan but never pan so that there is empty space between the left edge of the image and the left edge of the bounding container. </p>
  
  <p>Imgur does it well, but their code isn't open source.  Any ideas how they accomplish this?  <a href="http://m.imgur.com/gallery/LlJr8FA" rel="nofollow">http://m.imgur.com/gallery/LlJr8FA</a> (zoom on the image and pan around, it always stays contained)</p>