HTML – 在保持宽高比的同时显示尽可能大的图像 - 代码日志

HTML – 在保持宽高比的同时显示尽可能大的图像

我想要一个显示单个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>
http://stackoverflow.com/questions/160666/html-display-an-image-as-large-as-possible-while-preserving-aspect-ratio

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:HTML – 在保持宽高比的同时显示尽可能大的图像