이미지 컨테이너 높이를 값의 배수로 크기 조정 (로드, 방향 변경 및 크기 조정시)

이미지 컨테이너의 높이를 기준선 격자로 스냅하는 jquery 스크립트를 개선해야합니다. 창 크기를 조정하는 동안 그것을 작동하게하고 싶습니다.이미지 컨테이너 높이를 값의 배수로 크기 조정 (로드, 방향 변경 및 크기 조정시)

지금까지 overflow가 hidden으로 설정된 이미지 컨테이너에 다음을 적용했습니다. 그 중 일부는 here 및 here과 같은 질문에 의해 영감을 받았습니다.

/* Updates height on $(window).load(function(){}); */ 
$(window).load(function(){ 

    /* Adjust media container heights and image margins */ 
    function containerHeight(){ 
     var targetContainer = 'div.media'; 
     $(targetContainer).each(function(){ 
      var targetHeight = Math.round($(this).height()/20) * 20 - 8; 
      if($(this).height() < targetHeight){ 
       var newHeight = targetHeight - 20; 
      }else{ 
       var newHeight = targetHeight; 
      } 
      $(this).css({ 
       'height': newHeight 
      }); 
     }); 
     $(targetContainer).children('img').each(function(){ 
      $(this).css({ 
       'margin-top': Math.round(($(this).parent(targetContainer).height() - $(this).height())/2) 
      }); 
     }); 
    } 
    containerHeight(); 
    /* Does not update height on $(window).bind('resize', function(){}); with <body class="full"> */ 
    $(window).bind('resize', function(){ 
     containerHeight(); 
    }); 

});

그러나, http://pastie.org/2846491에서 내 pastie는 고정 폭 용기 작동합니다.

액체 용기의 너비/높이, 창 크기 조정 및 이동 후/이동 방향 : 세로/가로 방향이 바뀌면서 기준 격자에 물건을 유지하면서이 작업을해야합니다.

어떻게 접근해야합니까? 도와주세요!

출처

2011-11-10 Flo

나는 최근에이 문제가 있었고, 배심원 단련 해결책을 가졌습니다. 아니 가장 우아한/효율적인 솔루션 있지만 확실하게 실행할 수 :

var fontSize = 20; 
var lineHeight = 28; 

$(window).resize(function() { 
    $('img').each(function() { 
     var heightDif = $(this).outerHeight(); 
     $(this).css('margin-bottom', fontSize + heightDif % lineHeight); 
    }); 
}); 
$('img').load(function() { $(window).resize(); });

윈도우 크기를 조정하고, 상 높이와 다음 최저 기준 사이의 차이를 산출 할 때마다 코드는 불. 그런 다음 차이를 하단 여백에 더합니다. 이 이벤트는 img로드에서 먼저 발생합니다 (효율성 향상을위한 기회입니다).

이 정보가 도움이되기를 바랍니다. 당신이 그것을 향상시킬 수있는 개선이 있다면, 나는 내 코드에서 그들을 구현할 수 있도록 알고 싶습니다!

출처

2011-11-24 23:56:26

이미지 컨테이너 높이를 값의 배수로 크기 조정 (로드, 방향 변경 및 크기 조정시)

답변

관련 문제