javascript - Rotate and resize image with jquery and CSS -

i have image img.png dimensions: width=300px, height=200px. image in div container:

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

and css are:

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

the image displayed nicely. however, dynamically can rotate image jquery using:

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

with image rotated it's out of div container. how can keep inside?

not sure if that's mean, about

div.thumbnail {overflow:hidden;}