創建保持寬高比的響應式照片網格？

Question

我有一組圖像與砌體安排。我希望圖像能夠調整大小，但我希望它們保持相同的順序。基本上，我希望整個網格保持相同的寬高比。我已經嘗試了流體砌體佈局選項，它使得圖像跳躍到各地。如果我將容器div設置爲保持縱橫比，則圖像會在瀏覽器調整大小時跳到容器下方。無論如何用CSS來做到這一點？

Answer 1

用於保持可以從這個jQuery函數使用縱橫比：

jQuery.fn.fitToParent = function() 
{ 
    this.each(function() 
    { 
     var width = $(this).width(); 
     var height = $(this).height(); 
     var parentWidth = $(this).parent().width(); 
     var parentHeight = $(this).parent().height(); 

     if(width/parentWidth < height/parentHeight) 
     { 
      newWidth = parentWidth; 
      newHeight = newWidth/width*height; 
     } 
     else 
     { 
      newHeight = parentHeight; 
      newWidth = newHeight/height*width; 
     } 
     margin_top = (parentHeight - newHeight)/2; 
     margin_left = (parentWidth - newWidth)/2; 

     $(this).css({'margin-top' :margin_top + 'px', 
        'margin-left':margin_left + 'px', 
        'height'  :newHeight + 'px', 
        'width'  :newWidth + 'px'}); 
    }); 
};