html获得图片宽高比,HTML – 在保持宽高比的同时显示尽可能大的图像

我想要一个显示单个PNG或JPEG图像的HTML页面。我想让图像占据整个屏幕，但是当我这样做时：

它只是延伸图像，弄乱了长宽比。如何解决这个问题，以便图像具有正确的长宽比，同时缩放到最大尺寸？

Wayne发布的解决方案几乎可以工作，除了你有一个高大的图像和一个宽窗口的情况。这段代码对他的代码做了一些修改：

function resizeToMax(id){

myImage = new Image()

var img = document.getElementById(id);

myImage.src = img.src;

if(myImage.width / document.body.clientWidth > myImage.height / document.body.clientHeight){

img.style.width = "100%";

} else {

img.style.height = "100%";

}

}