我想要一个显示单个PNG或JPEG图像的HTML页面。我想让图像占据整个屏幕，但是当我这样做时：
<img src="whatever.jpeg" width="100%" height="100%" />
它只是延伸图像，弄乱了长宽比。如何解决这个问题，以便图像具有正确的长宽比，同时缩放到最大尺寸？
Wayne发布的解决方案几乎可以工作，除了你有一个高大的图像和一个宽窗口的情况。这段代码对他的代码做了一些修改：
<html>
<head>
<script>
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%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
解决方法
这是一个快速的功能，将高度或宽度调整到100％取决于哪个更大。在FF3测试，IE7&铬
<html>
<head>
<script>
function resizeToMax(id){
myImage = new Image()
var img = document.getElementById(id);
myImage.src = img.src;
if(myImage.width > myImage.height){
img.style.width = "100%";
} else {
img.style.height = "100%";
}
}
</script>
</head>
<body>
<img id="image" src="test.gif" onload="resizeToMax(this.id)">
</body>
</html>
