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

我需要将当前窗口大小缩小到客户机窗口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;

来源

2014-01-22 Orange Fox

请描述，尽你所能，哪里出了问题：什么期望/预期会发生什么确实发生了。 – Faust

为什么不依靠** CSS ** **响应式设计** _image resizing_：img {max-width：100％;}，它会根据窗口和容器大小调整图像大小？ – datelligence

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

例如

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

来源

2014-01-22 20:38:05 R3tep

您的代码无法正常工作：图像未缩小。 http://jsfiddle.net/ze53k/ –

我更新了我的答案 – R3tep

而其他代码：http://jsfiddle.net/ze53k/1/ – R3tep

我不知道，如果你的上面是一个文本剪切粘贴&，但你正在使用的“和”字，而不是“&”或“& &”，而你是不是你的终止声明。

添加这些简单的调整：

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; 
     } 
    } 
}

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

此外，您可以考虑将parseInt添加到您的goodWidth分配中，以便您的比较适当地输入。

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

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

来源

2014-01-22 20:45:04

我只是推荐使用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; 
     } 
    } 
}());

来源

2014-01-22 20:56:27 Hristo

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

回答

相关问题