가로 세로 비율을 유지하는 반응 형 사진 격자를 만드시겠습니까?

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

을