javascript - jquery と CSS を使用して画像を回転およびサイズ変更する

Question

幅= 300px、高さ= 200pxの画像img.pngがあります。この画像は div コンテナにあります。

<div class='thumbnail'> <img id='imgX' src='img.png'> </div>

CSS は次のとおりです。

div.thumbnail {
    width: 500px;
    height: 300px;
}

div.thumbnail > img {
    height: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

画像がきれいに表示されます。ただし、次を使用してjqueryで動的に画像を回転できます。

$("#imgX").css("transform","rotate(90deg)");

これで画像は回転しますが、div コンテナからはみ出しています。どうしたら中に入れられますか？