javascript - 如何使用 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的问题。

通常建议使用 $(window).load 而不是 $(document).ready，但这也不起作用。

有谁知道如何修复它。我尝试了两天找到解决方案，但现在不知道该怎么办。

最诚挚的问候 神话

Answer 1

$(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