使用JavaScript调整表格中图像的大小

Question

如果没有任何道理，或者听起来不称职，我会事先道歉。我已经制作了一段时间的网页，但不知道任何JavaScript。

我正在尝试为一个朋友创建一个网页，他要求我是否可以编写一些代码来根据用户的屏幕分辨率来调整页面中图像的大小。 我对此问题进行了一些研究，它与此 ， 这个和这个有点相似。 不幸的是，这些文章没有完全回答我的问题，因为所描述的方法均无效。

现在，我在左侧栏中的表格中有一个三列的网页，其中包含10张图像，当我使用百分比作为它们的大小时，它们不会在显示器之间调整大小。 因此，我正在尝试编写一个JavaScript函数，该函数在检测屏幕分辨率后即可更改其大小。

如果我把所有代码都删除了，那么，我只想说每个图像都链接到一个网站，并且当您将鼠标悬停在其上时，会使用单独的图像来更改颜色。 我是否必须处理两个图像以正确更改其大小？ 我使用JavaScript函数在它们之间切换。

无论如何，我在本文中尝试了这两种方法，但对我都不起作用。 如果有帮助，我正在使用Google Chrome浏览器，但我正在尝试使此页面尽可能跨浏览器。

到目前为止，这是我的JavaScript函数中的代码：

function resizeImages() {
    var w = window.width;
    var h = window.height;
    var yuk = document.getElementById('yuk').style;
    var wb = document.getElementById('wb').style;
    var tf = document.getElementById('tf').style;
    var lh = document.getElementById('lh').style;
    var ko = document.getElementById('ko').style;
    var gz = document.getElementById('gz').style;
    var fb = document.getElementById('fb').style;
    var eg = document.getElementById('eg').style;
    var dl = document.getElementById('dl').style;
    var da = document.getElementById('da').style;

    if (w = "800" && h = "600") {
    }
    else if (w = "1024" && h = "768") {
    }
    else if (w = "1152" && h = "864") {
    }
    else if (w = "1280" && h = "720") {
    }
    else if (w = "1280" && h = "768") {
    }
    else if (w = "1280" && h = "800") {
    }
    else if (w = "1280" && h = "960") {
    }
    else if (w = "1280" && h = "1024") {
    }
}

是的，我没有太多，因为我不知道我是否在做正确的事。 这样可以检测窗口的“宽度”和“高度”属性吗？ “ yuk”，“ wb”等是我要更改大小的图像。

把它们加起来：

我想使用JavaScript根据屏幕分辨率调整图像的大小，但是我的研究尝试...徒劳无功。

不好意思，很抱歉，但是请提前谢谢！

Answer 1

这应该可以解决问题。

init();

function init()
{
    var images = document.getElementById("images");
    for(var i=0;i<images.childNodes.length;i++)
    {
        //scare off possible text nodes
        if(images.childNodes[i].tagName == "IMG")
        {
            images.childNodes[i].width = window.innerWidth * .25;
            images.childNodes[i].height = window.innerHeight * .25;
        }
    } 
}

我从div中获取所有ID为images的孩子，然后遍历它们，同时排除所有文本节点。 然后，我要做的就是根据浏览器的宽度/高度乘以.25来设置宽度和高度。

http://jsfiddle.net/CQsPk/1/