1

如果这些都没有任何意义，或者我听起来不称职，我提前道歉......我已经制作网页有一段时间了，但不知道任何 JavaScript。

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

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

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

无论如何，我在本文中尝试了这两种方法，但都不适合我。如果它有帮助，我正在使用谷歌浏览器，但我试图让这个页面尽可能跨浏览器。

这是到目前为止我的 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 根据屏幕分辨率调整图像大小，但我的研究尝试是……徒劳的。

对不起，如果那是冗长的，但提前谢谢！

4

1 回答 1

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 的 div 中获取所有孩子，images并在排除所有文本节点的同时循环遍历它们。然后，我所做的就是根据浏览器宽度/高度乘以.25.

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

于 2011-01-09T03:43:41.523 回答