크롬 두통에서 max-height와 max-width가있는 jQuery 위치 지정 이미지

Question

Chrome이 새로운 버전으로 업데이트되고 일부 jQuery 코드가 더 이상 작동하지 않는다는 것을 알아 챘습니다 ... (jQuery 버전 1.7 -

이것은 슬라이드 쇼에서 이미지 위치 지정 (가운데 정렬) 및 이전/다음 버튼 배치를위한 기본 코드입니다. FF로 작동합니다 (IE에 대해 잘 모름 - 가능한 한 작게 보입니다). 이제 높이에서 이미지 높이를 뺀 값을 계산하는 대신 크롬에서 상자 높이를 두로 나누는 것입니다. 그래서, 이미지가 4x 높이 인 상자의 경우 2x 높이 FF로 나에게 정확한 "상단 : 1x"를 제공하는 반면 Chrome은 "상단 : 2x"를 제공합니다.

이상하게 그것은 ... 정확하게 # 다음과 #prev 배치 된 div

h = j$('.slide').height(); 
w = j$('.slide').width(); 
nph = j$('#next').height(); 
j$('.slide').each(function(){ 
    thisImg= j$(this).find('img'); 
    var imgH = thisImg.height(); 
    var imgW = thisImg.width(); 
    thisImg.css({'position':'absolute', 
       'top':(h-imgH)/2, 
       'left':(w-imgW)/2 
    }); 
}) ; 
j$('#next, #prev').css('top',(h-nph)/2); 

};

올바르게 작동하지 않거나 Chrome에서 변경된 사항 (업데이트 이후 다른 사이트에서 전체 애니메이션을 잃어 버렸습니다). 내가 잘못하지 않았다면 Chrome에는 어떤 해킹이 있습니까?

EDIT 추가 연구를 통해 내가 유연한 (백분율 기반) 환경에서 이미지를 사용하려고하기 때문에 이것이 내가 생각하게 만듭니다. 이 이미지를 의미 사업부 따라서 스타일된다 : 파이어 폭스가 계산을 할 수 있다는 것

div {height:100%;width:100%;} 
img {max-height:100%;max-width:100%} 

하지만 크롬은 할 수 없습니다. "다음"및 "이전"div에는 크기 (및 위치가 올바르게 알려짐)가 있습니다. 이미지가로드 될 때이를 "잡아"최대 높이 및 최대 너비가 적용되기 전에 치수가 무엇인지 알아내는 방법이 있습니까?

최신 업데이트 "max-height"또는 "max-width"의 스타일 인 경우 Chrome에서 페이지의 이미지 높이 값을 반환 할 수 없음을 확인했습니다. "outerHeight/Width"메서드도 작동하지 않습니다.

Answer 1

Nick, 해결 방법은 이미지의 종횡비를 유지할 수있는 이점이있는 CSS 대신 CSS 대신 max-height 및 max-width 제한을 적용하는 것입니다. 높이와 폭 제한을 독립적으로 적용하므로 CSS에는이 기능이 없습니다.

'left'및 'top'오프셋을 적용하는 동일한 루프에서 적용 할 수 있습니다.

이 시도 :

주석에 나타난 바와 같이

j$(function() { 
    j$(".slide img").each(function(i, img) { 
     var $img = j$(img), 
      $wrapper = $img.closest(".slide"),//assuming '.slide' is the constraining wrapper 
      w = $wrapper.width(), 
      h = $wrapper.height(), 
      _w = $img.width(), 
      _h = $img.height(), 
      scale = Math.min(1, w/_w, h/_h);//scale down if necessary, never scale up, preserving aspect ratio 
     _w *= scale; 
     _h *= scale; 
     $img.width(_w).height(_h).css({ 
      'position': 'absolute', 
      'left': (w - _w)/2, 
      'top': (h - _h)/2 
     }); 
    }); 
    var nph = j$('#next').height(); 
    j$('#next, #prev').css('top', (h-nph)/2); 
}); 

, 나는 .slide가 구속 래퍼 있다고 가정했다. 그렇지 않은 경우 문 $wrapper = $img.closest(".slide")에있는 선택기를 조정하십시오.

Math.min()에 대해 걱정할 필요가 없습니다. 실수가 아닙니다. 최소값은 이며 최대 값은입니다.