javascript - 调整页面大小时调整图像大小

Question

我需要将对于当前窗口大小来说太大的图像减少到客户端窗口大小的 85%。为此，我创建了一个函数来处理 onload 和 onresize 事件。但是出了点问题:(

function a(){
    var img = document.getElementsByTagName("img")
    var goodWidth = document.body.clientWidth*0.85
    for(i=0;i<img.length;i++){
    img[i].maxWidth=img[i].width
                    if(img[i].width>goodWidth){
        img[i].width=goodWidth
    }
    if((img[i].width<img[i].maxWidth) and (img[i].width<goodWidth)){
        img[i].width=goodWidth
    }
            }
    }

我对我的纯粹描述感到抱歉。现在我将尝试修复它:例如，我有一张这样尺寸的图片:1.1920x1080、2.1280x720、3.640x480。所有图像的大小不应超过浏览器窗口大小的 85%。它应该如何工作:

For resolution 1680x1050:
Picture 1: (1680 * 0,85) x (1050 * 0.85);
Picture 2: 1280x720;
Picture 3: 640x480;
For resolution 800x600:
Picture 1: (1680 * 0,85) x (1050 * 0.85);
Picture 2: (1280 * 0.85) x (720 * 0.85);
Picture 3: 640x480;
When the resolution of the browser window again increase to 1680x1050:
Picture 1: (1680 * 0,85) x (1050 * 0.85);
Picture 2: 1280x720;
Picture 3: 640x480;

Answer 1

也许 Javascript 不是最好的解决方案。可以仅使用 HTML/CSS。

示例

   <img width="85%" src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg" />