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

Question

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

场所:

我有一个名为“canvas”的容器 div，它可以接受一个可放置的元素。我的可放置元素是一个图像，周围环绕着一个 div。当您将图像拖放到“ Canvas ”上时，它将调整大小以适应该 div 并保持纵横比。本例中的图像最终将是动态的。我不知道图像的宽度、高度或方向。我已经为初始下降完成了调整大小功能。我还允许用户每 90 度旋转掉落的图像。确保在“示例 1”中放置图像后单击它

问题:

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

目标:

我需要“示例 1”中放置的图像来执行“示例 2”中图像在我的“canvas”div 容器中执行的操作。我需要在单击图像时发生此操作，而不是在浏览器调整大小时发生此操作，以便正确调整每个 Angular 大小并居中。

就像我说的，我已经尝试了所有方法，任何可以向我展示这个想法可行的例子的人都会成为我最后的 7 天!

简而言之:

图像在旋转时需要适合“ Canvas ”尺寸。无论图像位于什么 Angular ，都需要保持纵横比。

示例 1:

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

示例 2:

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

Answer 1

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