ここで本当に助けが必要です。私はjQueryを学習している最中であり、作成する必要のある機能の一部に完全に固執しています。私はインターネットのいたるところを見てきましたが、私が達成しようとしていることの既存の例を見つけることができませんでした。代わりに、私が作成してjsfiddleに配置した2つの別々の例があります。誰かがそれぞれの例を見て、両方を1つのものに実装する方法を教えてくれることを願っています。
前提：
ドロップ可能な要素を受け入れる「canvas」と呼ばれるコンテナdivがあります。ドロップ可能な要素は、divがラップされた画像です。画像を「キャンバス」上にドラッグアンドドロップすると、アスペクト比を維持しながら、そのdiv内に収まるようにサイズが変更されます。この例の画像は、最終的には動的になります。画像の幅、高さ、向きがわかりません。最初のドロップでサイズ変更機能が完了しました。また、ユーザーがドロップした画像を90度ごとに回転できるようにします。「例1」でドロップした画像をクリックしてください</p>
問題：
コンテナにドロップした後で画像をクリックすると、前述のようにうまく回転しますが、「キャンバス」の幅と高さに収まる必要があります。したがって、画像が90度の角度にある場合、画像は「キャンバス」divと重なります。画像のサイズを新しい角度に変更し、アスペクト比を自動的に維持する必要があります。画像をスキューしてフィットさせることはできません。「例2」では、サイズ変更の側面をほぼ達成しました。「例2」をロードすると、ブラウザのサイズを変更すると画像のサイズが変更されることがわかります。また、プロセスでアスペクト比を維持します。この例にonClickという画像を追加したので、画像を回転させて、ブラウザのサイズが変更されたときに正しくサイズ変更されるのを見ることができます。
目標：
「canvas」divコンテナ内の「Example2」で画像が実行していることを実行するには、「Example1」からドロップした画像が必要です。ブラウザのサイズが変更されたときにこのアクションが発生するのではなく、画像がクリックされたときに発生して、各角度が正しくサイズ変更されて中央に配置されるようにする必要があります。
私が言ったように、私はすべてを試しました、そしてこのアイデアがうまくいく例を私に示すことができる人は誰でも私の最後の7日間を作るでしょう！
一言で言えば：
画像は、回転したときに「キャンバス」の寸法に合わせる必要があります。画像は、どの角度に配置されていても、アスペクト比を維持する必要があります。
例1：
http://jsfiddle.net/jwuliger/wJQmQ/
例2：