Rotate image while maintaining aspect ratio

Question

I need to rotate an image and maintain the ratio relative to the parent DIV without 'escaping'. I’m just using rotate(90deg) and the original image properties, as in the example.

There are some plugins that do this but contain a lot of unnecessary stuff, I believe some adjustment in CSS solve, but not the attributes to manipulate images like this.

$('button').click( function( event )
{
	$('img').css({ transform : 'rotate(90deg)' })
})

div{border:#000000 solid 1px; width:200px; height:300px; text-align:center}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>girar</button>

<div>
<img src="http://i.ebayimg.com/images/g/v7sAAOSwQTVV7toe/s-l300.jpg">
</div>