旋转后将图像调整为div

Question

<div id="homePage"
        style="position: relative; margin: 0px; width: 320px; height: 420px;">
        <img id="userImg" src="images/5.jpg" width="100%"
            height="100%" onclick="imageClick()"
            style=" z-index: -1; margin: 0px;   "/>
</div>

<script type="text/javascript">

$(document).ready(function() {
$('#userImg').css('transform', 'rotate(90deg)');

});

</script>

图像在旋转前适合div，旋转后它离开边界，如何将旋转的图像适合DIV尺寸。

旋转之前

旋转后

感谢,,

Answer 1

尝试以下方法。获取图片的宽度和高度，并在旋转后更改尺寸。

var w= $('#homePage').width();
var h= $('#homePage').height();
console.log(w);
console.log(h);
$('#userImg').css('transform', 'rotate(90deg)');
$('#homePage').height(h);
$('#homePage').width(w);