在旋轉之後將圖像轉換爲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);