我真的需要一些帮助。我正在学习 jQuery，我完全被困在我需要生产的一个功能上。我在互联网上到处寻找，但找不到我正在努力实现的现有示例。相反，我有两个单独的示例，我构建并放置在 jsfiddle 中。我希望有人可以看一下每个示例，然后向我展示如何将它们都实现为一件事。
场地：
我有一个容器 div，我称之为“canvas”，它将接受一个可放置的元素。我的可放置元素是一个带有 div 的图像。当您将图像拖放到“画布”上时，它将调整大小以适应该 div 并保持纵横比。此示例中的图像最终将是动态的。我不会知道图像的宽度、高度或方向。我已经为初始放置完成了重新调整大小的功能。我还允许用户将丢弃的图像每 90 度旋转一次。请务必在“示例 1”中拖放图片后点击该图片</p>
问题：
当您在将图像放入容器后单击图像时，它会像我说的那样旋转得很好，但需要适应“画布”的宽度和高度。因此，当图像呈 90 度角时，它会与“画布”div 重叠。我需要以新角度调整图像大小并自动保持其纵横比。图像不能倾斜以适合。在“示例 2”中，我几乎实现了重新调整大小方面。如果您加载“示例 2”，您将看到在重新调整浏览器大小时图像会重新调整大小。它还在此过程中保持其纵横比。我在此示例中添加了一个图像 onClick，因此您可以旋转图像，然后在更改浏览器大小时观看它正确调整大小。
目标：
我需要从“示例 1”中删除的图像来执行图像在“画布”div 容器中的“示例 2”中所做的事情。而不是在浏览器重新调整大小时发生此操作，我需要在单击图像时发生此操作，以便正确调整每个角度的大小并居中。
就像我说的那样，我已经尝试了一切，任何可以向我展示这个想法的例子的人都会让我度过最后的 7 天！
简而言之：
旋转时，图像需要适合“画布”尺寸。图像无论放置在什么角度都需要保持纵横比。
示例 1：
http://jsfiddle.net/jwuliger/wJQmQ/
示例 2：