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

Answer 2

将load个事件附加到<img>的{{1}}元素;在.ready()事件处理程序中调用.height()，因为如果在load事件完成之前调用.height()并且可能返回load

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

如何使用jquery获取图像大小（Chrome，Safari ...）

2 个答案: