設置圖像寬度的一系列圖像

Question

我有以下問題我有一個具有一定寬度的容器。在那個容器裏是一系列的圖像。有些比容器的尺寸要小一些。現在，我希望最大的圖像是容器的80％，並且所有其他圖像都需要根據最大的圖像（僅當它們大於容器時）調整大小。

這是我試過到目前爲止：

var $pageContainer = $('.pageContainer'); 
     var canvasWidth = $pageContainer.width(); 
     var maxWidth = 0; 

     $pageContainer.find('img').each(function (index, el) { 
      if ($(el).width() > maxWidth) maxWidth = $(el).width(); 
     }); 

     var percentage = canvasWidth/maxWidth * 100; 

     $pageContainer.find('img').each(function() { 
      var $img = $(this); 
      var imgWidth = $img.width(); 

      $img.width(percentage + '%'); 
     }); 

Offcourse這個心不是工作。導致如果百分比變量是64，那麼圖像只是被調整到其容器的64％。所以我認爲我應該把最大的圖像，設置爲80％，並計算差異，但我不知道從哪裏開始。任何幫助，將不勝感激。

Answer 1

你快到了！您正在根據容器的寬度設置％值（如您所述）。相反，將百分比應用於當前圖像寬度。

第四個圖像（在我的例子中）是最大的。其餘的將根據第四張圖片的大小調整大小。

Here's a fiddle.

Here is an example來檢查，如果最大的圖像比容器大。

var $pageContainer = $('.pageContainer'); 
    var canvasWidth = $pageContainer.width(); 
    var maxWidth = 0; 

    $pageContainer.find('img').each(function (index, el) { 
     if ($(el).width() > maxWidth) maxWidth = $(el).width(); 
    }); 


    var percentage = canvasWidth/maxWidth; 

    $pageContainer.find('img').each(function() { 
     var $img = $(this); 
     var imgWidth = $img.width(); 

     $img.width(imgWidth * percentage); 
    });