jqueryで画像サイズを取得する方法（Chrome、Safari ...）

Question

私はjqueryの初心者です。jqueryで画像の高さを取得する必要があります。 これは私が使用するコードです：

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

これは、htmlコードです：

<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：

.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; 
} 

それはFirefoxとIEで正常に動作しなくChromeのですとSafari。 webkitbrowserに問題があることがわかりました。

$（document）.readyの代わりに$（window）.loadを使用することをお勧めしますが、これもうまくいきません。

どのように修正するか考えている人はいませんか。私は解決策を見つけるために2日間試して、今何をすべきか分からない。

ベストreagards ミトス

Answer 1

.ready()で<img>要素にloadイベントを添付。 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