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

Question

如果这些都没有意义，或者如果我听起来很无能，我事先表示歉意......我制作网页已经有一段时间了，但不懂任何 JavaScript。

我正在尝试为 friend 制作一个网页，他请求我是否可以编写一些代码来根据用户的屏幕分辨率调整页面中图像的大小。我对这个问题做了一些研究，它有点类似于this , this ，和this 。不幸的是，这些文章并没有完全回答我的问题，因为所描述的方法都不起作用。

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

如果我把所有代码都放在我的帖子中，代码就会从我的帖子中删除，所以我只会说每个图像链接到一个网站，并在您将鼠标悬停在其上方时使用单独的图像来更改颜色。我是否必须解决这两个图像才能正确更改其大小？我使用 JavaScript 函数在它们之间切换。

无论如何，我在 this article 中尝试了两种方法两者都不适合我。如果有帮助的话，我正在使用 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;
        }
    } 
}

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

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