jquery (Chrome, Safari ...)로 이미지 크기를 얻는 방법

Question

저는 jquery 초보자이며 jquery로 이미지의 높이를 가져와야합니다. 입니다 코드는 내가 사용하지 크롬에서

.slider-image { 
position: absolute; 
width: 100%; 
} 

.slider-image img{ 
width: 100%; 
height: auto; 
} 

.inline-block { 
display: inline-block; 
} 

.slider-container { 
position:relative; 
width: 100%; 
overflow: hidden; 
} 

#slider-left { 
position: absolute; 
top: 50%; 
z-index: 1; 
} 

#slider-right { 
position: absolute; 
top: 50%; 
right: 0; 
z-index: 1; 
} 

그것은 파이어 폭스와 IE와 잘 작동하고 있지만 :

<div class="slider-container"> 
<button type="button" id="slider-left">Left</button> 
<button type="button" id="slider-right">Right</button> 
<div class="slider-image" ><img src="http://xxxx.jpg" class="alignnone size-medium wp-image-1558 testor" id="testor" /></div> 

<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1557 testor" /></div> 

<div class="slider-image"><img src="http://xxx.jpg" class="alignnone size-medium wp-image-1556 testor" /></div> 
</div> 

그리고 CSS :

$(document).ready(function ($) { 
    var height = $('#testor').height(); 
    $('.slider-container').css("height", height); 
}); 

이 HTML 코드입니다 및 사파리. webkitbrowser에 문제가 있음을 알게되었습니다.

종종 $ (document) .ready 대신 $ (window) .load를 사용하는 것이 좋지만 작동하지 않습니다.

누구나 해결 방법을 알고 있습니까? 나는 2 일 동안 해결책을 찾고 지금 무엇을 해야할지 모릅니다.

베스트 reagards 미토스

Answer 1

가 load 이벤트 .ready() 소자에 부착 <img>; 요소가 완전히 .height()가 load 이벤트가 완료되기 전에 호출되고 0

.slider-image { 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
.slider-image img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 
.inline-block { 
 
    display: inline-block; 
 
} 
 
.slider-container { 
 
    position: relative; 
 
    width: 100%; 
 
    overflow: hidden; 
 
} 
 
#slider-left { 
 
    position: absolute; 
 
    top: 50%; 
 
    z-index: 1; 
 
} 
 
#slider-right { 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    z-index: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> 
 
</script> 
 
<script> 
 
    $(document).ready(function($) { 
 
    $('#testor').on("load", function() { 
 
     var height = $(this).height(); 
 
     console.log(this.complete); 
 
     alert(height); 
 
     $('.slider-container').css("height", height); 
 
     console.log(".slider-container height:", 
 
        $('.slider-container').css("height")); 
 
    }) 
 
    }); 
 
</script> 
 
<div class="slider-container"> 
 
    <button type="button" id="slider-left">Left</button> 
 
    <button type="button" id="slider-right">Right</button> 
 
    <div class="slider-image"> 
 
    <img src="http://lorempixel.com/100/100/" class="alignnone size-medium wp-image-1558 testor" id="testor" /> 
 
    </div> 
 

 
    <div class="slider-image"> 
 
    <img src="" class="alignnone size-medium wp-image-1557 testor" /> 
 
    </div> 
 

 
    <div class="slider-image"> 
 
    <img src="" class="alignnone size-medium wp-image-1556 testor" /> 
 
    </div> 
 
</div>

Answer 2

$(document).ready(function ($) { 
    var myimage = document.getElementById("testor"); 
    var w = myimage.width; 
    var h = myimage.height; 
//Assign the variable to your jquery css 
$(".slider-container").css("height",h); 
}); 

JSfiddle