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.34x480。所有图像的大小不应超过浏览器窗口大小的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" />

Answer 2

我不确定你的上面是否是文字剪辑＆amp;粘贴，但您使用“和”而不是“＆amp;”或“＆amp;＆amp;”，并且您不会终止您的陈述。

添加这些简单的调整：

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) && (img[i].width < goodWidth)) {
            img[i].width = goodWidth;
        }
    }
}

给了我一个实现你所描述的功能。

此外，您可以考虑在goodWidth分配中添加一个parseInt，以便对您的比较进行适当的输入。

var goodWidth = parseInt(document.body.clientWidth * 0.85);

最后，你应该使用jQuery，因为它很棒。

Answer 3

我建议使用jQuery $（window）.width（）来检查正文完成加载时的用户浏览器宽度（或高度）。它与浏览器兼容，并且运行良好。

这是一个未经测试的功能概念：

(function(){
    var browserWidth = $(window).width();
    var img = document.getElementsByTagName("img");
    var goodWidth = browserWidth*0.85;
    for(i=0; i<img.length; i++){
        var oldImgWidth = img[i].width;
        if (oldWidth >= browserWidth){
            img[i].width = goodWidth;
            //Don't forget to shrink the height too
            img[i].height *= goodWidth / oldWidth;
        }
    }
}());

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

3 个答案: