title: jQuery resize image based on dynamic angle to fit within div's width and height proportionally
body: <p>I really need some help here. I am in the process of learning jQuery and I am completely stuck on a piece of functionality that I need to produce.   I have looked everywhere on the internet but could not find an existing example of what I am trying to achieve. Instead I have two separate examples that I built and placed in jsfiddle. I am hoping someone can take a look at each example and then show me how to implement them both into one thing.</p>
  
  <p><strong>The premises:</strong></p>
  
  <p>I have a container div I have called “canvas” that will accept a droppable element. My droppable element is an image with a div wrapped around it. When you drag and drop the image over the “canvas” it will resize to fit within that div maintaining the aspect ratio. The image in this example will eventually be dynamic. I will not know the width, height or orientation of the image. I have the re-size functionality completed for the initial drop. I also allow the user to rotate that dropped image every 90 degrees. Be sure to click the image after it has been dropped in “Example 1”</p>
  
  <p><strong>The Problem:</strong></p>
  
  <p>When you click the image after it has been dropped into its container it rotates just fine as I said but needs to fit within the “canvas” width and height. So when the image is at a 90 degree angle it overlaps the “canvas” div. I need to resize the image at its new angle and maintain its aspect ratio automatically. The image cannot be skewed to fit. In “Example 2” I have almost achieved the re-sizing aspect. If you load “Example 2” you will see that the image re-sizes when the browser is re-sized. It also maintains it’s aspect ratio in the process. I have added an image onClick to this example so you can rotate the image and then watch it resize correctly when the browser size is changed.</p>
  
  <p><strong>The Goal:</strong></p>
  
  <p>I need the dropped image from “Example 1” to do what the image is doing in “Example 2” within my “canvas” div container. Instead of this action occurring when the browser re-sizes, I need it to happen when the image is clicked so that each angle is re-sized correctly and centered.</p>
  
  <p>Like I said I have tried everything and anyone that can show me an example of this idea working will make my last 7 days!</p>
  
  <p><strong>In a nutshell:</strong></p>
  
  <p>The image needs fit the “canvas” dimensions when rotated. The image needs to maintain the aspect ratio no matter what angle it is positioned at.</p>
  
  <p><strong>Example 1:</strong></p>
  
  <p><a href="http://jsfiddle.net/jwuliger/wJQmQ/" rel="nofollow">http://jsfiddle.net/jwuliger/wJQmQ/</a></p>
  
  <p><strong>Example 2:</strong></p>
  
  <p><a href="http://jsfiddle.net/jwuliger/bH8nx/" rel="nofollow">http://jsfiddle.net/jwuliger/bH8nx/</a></p>