Question

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

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");
    }
}

我脑子里的工作原理如下：

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

我关闭了吗？

Answer 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;">

保持比率的完整浏览器图像

1 个答案: