js图片旋转且充满div问题

[饺子da]

var myImage = document.createElement("img");
myImage.style.transform = 'rotate(90deg)';
document.body.appendChild(myImage);


自己做一个练习，想要图片旋转90度，然后无论图片是大还是小，都适应div大小。现在旋转90度用的是 myImage.style.transform = 'rotate(90deg)';可以实现。只是无论怎么设置width height图片都不能适应div大小。
求代码

[囧]

	<div class="rotate" id="rotate" style="background:#000; width:300px; height:200px;"></div>
	<script type="text/javascript">
	window.onload = function(){
		var div = document.getElementById("rotate");
		var myImage = document.createElement("img");
		var width = div.offsetWidth, height = div.offsetHeight;
		myImage.src = "https://www.baidu.com/img/bd_logo1.png";
		myImage.style.width = height + 'px';
		myImage.style.height = width + 'px';
		myImage.style.marginLeft = (width - height) / 2 + 'px';
		myImage.style.marginTop = (height - width) / 2 + 'px';
		myImage.style.transform = 'rotate(90deg)';
		div.appendChild(myImage);
	};
	</script>

[Unicode Escapes]

把myImage的width和height都设置成100%，如果还不是你要的效果，那就是上级div的宽度高度不对，具体可以F12看看盒子模型