javascript - 旋转后将图像放入 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);

​</p>