在調整頁面大小時調整圖像的大小頁面

我需要將當前窗口大小縮小到客戶機窗口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

在調整頁面大小時調整圖像的大小頁面

回答

相關問題