jQuery根据动态角度调整图像大小以按比例适合div的宽度和高度

Question

我真的需要一些帮助。我正在学习 jQuery，我完全被困在我需要生产的一个功能上。我在互联网上到处寻找，但找不到我正在努力实现的现有示例。相反，我有两个单独的示例，我构建并放置在 jsfiddle 中。我希望有人可以看一下每个示例，然后向我展示如何将它们实现为一件事。

场地：

我有一个容器 div，我称之为“canvas”，它可以接受一个可放置的元素。我的可放置元素是一个带有 div 的图像。当您将图像拖放到“画布”上时，它将调整大小以适应该 div 并保持纵横比。此示例中的图像最终将是动态的。我不会知道图像的宽度、高度或方向。我已经为初始放置完成了重新调整大小的功能。我还允许用户将丢弃的图像每 90 度旋转一次。请务必在“示例 1”中拖放图片后点击该图片

问题：

当您将图像放入容器后单击它时，它会像我说的那样旋转，但需要适应“画布”的宽度和高度。因此，当图像呈 90 度角时，它会与“画布”div 重叠。我需要以新角度调整图像大小并自动保持其纵横比。图像不能倾斜以适合。在“示例 2”中，我几乎实现了重新调整大小方面。如果您加载“示例 2”，您将看到在重新调整浏览器大小时图像会重新调整大小。它还在此过程中保持其纵横比。我在此示例中添加了一个图像 onClick，因此您可以旋转图像，然后在更改浏览器大小时观看它正确调整大小。

目标：

我需要从“示例 1”中删除的图像来执行图像在“画布”div 容器中的“示例 2”中所做的操作。不是在浏览器调整大小时发生此操作，而是在单击图像时发生此操作，以便正确调整每个角度的大小并居中。

就像我说的那样，我已经尝试了所有方法，任何可以向我展示这个想法的例子的人都会让我度过最后 7 天！

简而言之：

图像在旋转时需要适合“画布”尺寸。图像无论放置在哪个角度都需要保持纵横比。

示例 1：

http://jsfiddle.net/jwuliger/wJQmQ/

示例 2：

http://jsfiddle.net/jwuliger/bH8nx/

Answer 1

我不确定我是否完全理解这个问题，特别是因为您的示例 2 在 Chrome 中不适合我（旋转的图像仍然会溢出容器），但这有帮助吗？ http://jsfiddle.net/fEMuW/（减去可拖动对象未正确重新定位的问题）。