jquery 1.8 이상에서는 div의 높이를 다른 div와 동일하게 설정하십시오

Question

Jquery 1.8부터는 요소의 높이()를 가져올 때 변경되었습니다. CSS div 높이를 %와 auto를 사용하여 div의 높이와 너비를 지시하는 이미지와 함께 자동으로 설정했습니다. 그리고 창로드시 Jquery를 사용하여 요소 높이를 가져오고 옆에 다른 div를 만듭니다. 같은 높이. 이것을 연구 한 후에 나는 CSS가 이미지에 의해 설정된 새로운 높이를 설정하기 전에 높이를 되 돌리는 것으로 나타났습니다. 1.7에서 허용했지만 1.8 이상에서는 허용되지 않습니다. ther는 주위에 일하는가? 이 희망이 의미가, 누군가가 주변에 일이있는 CSS를

#element1{ width:80%; height:auto;} 
#element1 img{width:100%; height:auto};//this allows the image to resize with the page responsively. 

jQuery를 ...

$(window).ready(
function(){ 
var x = $("#element").height(); 
alert(x); // this would return what the height was dynamically set as by the css in 1.7, but 1.8 returns a small number that i am pretty certain is just the padding added to 0px 
}); 

입니다. 감사합니다.

Answer 1

, 각 <img> 인스턴스에서 성공적으로로드를 듣고 적절한 높이 계산을 트리거 할 수 있습니다.

그러나 질문에 동적으로 높이를 설정하는 것과 관련된 요소가 하나 뿐이므로 페이지의 모든 <img> 인스턴스를 반복 할 필요없이 스크립트를 축소했습니다.

<div id="element1"> 
    <img ... /> 
</div> 

당신이로드되어 있는지 확인 새로운 이미지를 만든 다음 높이 계산을 실행하기 위해 jQuery를 지시하고이 작업이 새로운 높이를 설정할 수 있습니다 :

$(function() { 
    var $img = $('<img />', { 
     'src': $('#element1 img').attr('src') 
    }); 

    $img.load(function() { 
     $('#element2').css('height', $('#element1').height()); 
    }); 
}); 

을 다음과 같은 마크 업을 가지고 있다고 가정

Answer 2

CSS 선택기 (# element1)와 jquery 선택기 ('#element')간에 불일치가 있습니다. 먼저 html 요소에있는 요소와 일치하게 만듭니다. 타임 아웃에서 이것을 감쌀 수 있으므로 이미지에 완전히로드 할 시간이 있습니다. 대신 모든 자원이 성공적으로로드 된 때까지 적절한 높이 지정을 멈출 수있는 $(window).load()에 듣는

$(document).ready(function() { 
    setTimeout(function() { 
     $('#element2').height($('#element1').height()); 
    }, 2000}); 
});