保持比例的完整浏览器图像答案

【问题标题】：Full Browser Image that Maintains Ratio保持比例的完整浏览器图像
【发布时间】：2011-03-07 14:29:56
【问题描述】：

基本上，我正在寻找一种使图像始终与浏览器窗口一样大但保持其纵横比的方法。图像应始终使用最小的浏览器边缘调整大小，使其悬在框架边缘但从不显示下方的白色。我已经走到这一步了：

window.onload = checkSize;
window.onresize = resize;

function checkSize(){
    var x = self.innerWidth;
    document.getElementById("picture").style.width = (x)+"px";
}

function resize(){
    var x = self.innerWidth;
    var y = self.innerHeight;
    var picy = document.getElementById("picture").style.height;
    document.getElementById("picture").style.width = (x)+"px";
    if (picy >= y){
        document.getElementById("picture").style.height = (y)+"px";
        document.getElementById("picture").style.removeProperty("width");
    }
}

在我的脑海中是这样工作的：

随宽度调整大小
如果图像高度小于窗口高度，则开始调整高度大小并移除宽度属性（以保持纵横比）

我接近了吗？

【问题讨论】：

为什么不给图片宽度全浏览器宽度，它会自动设置比例

标签： javascript

【解决方案1】：

这就是我会做的：

function resizeImage() {

if (self.innerHeight > self.innerWidth) {

document.getElementById("myimage").setAttribute("width","");
document.getElementById("myimage").setAttribute("height","100%");

} else {

document.getElementById("myimage").setAttribute("height","");
document.getElementById("myimage").setAttribute("width","100%");

}

}

并添加：

<body onload="resizeImage()" onresize="resizeImage()" style="margin:0px;">

【讨论】：