在旋转后将图像适配到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的尺寸呢？

旋转前

旋转后

谢谢！

- Theja

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);

​

- Doink