如果判断浏览器可视区在增加。

Question

这边我想制作一个图片随着浏览器窗口的改变而等比例缩小或增大的效果。

现在等比例缩小已经做到了。

但是该怎么判断浏览器窗口正在增加呢？部分代码如下

var oldWidth = oWrap.offsetWidth;

var newWidth = 0;

var percentage =0;

var percentageHeight = (bigImg[0].offsetWidth/bigImg[0].offsetHeight).toFixed(2);//这里是图片原始的比例

window.onresize = function(){

    newWidth = oWrap.offsetWidth;

    if(oldWidth>newWidth){

        percentage =  ((oldWidth-newWidth)/oldWidth).toFixed(2);

    }else{

        percentage = 1;//这里的判断是不对的，应该是1+增加的比例

    }

    for (var i=0;i<bigImg.length;i++) {

        var newimgWidth = bigImg[i].offsetWidth * (1-percentage);

        bigImg[i].style.width = newimgWidth +'px';

        bigImg[i].style.height = newimgWidth/percentageHeight +'px';

    }

}

代码有些乱，大家见谅，谢谢！

Answer 1

题主是想实现 图片响应式？1. 如果不是背景图片，那么浮动和宽度百分比就可以实现了（图片的宽高比是不会变化的）2. 如果是背景图片，那么请到&nbsp;这里

Answer 2

可以直接css里尺寸设置成百分比。