如何获取图像的高度并将该高度应用于 div

Question

我正在构建一个移动Web应用程序，我正在使用jquerytools滑块。

我希望 te 滑块在所有移动设备上显示（以适当的比例），因此图像的宽度为 100%，高度在 CSS 中是自动的。但是，由于所有元素都是浮动的，并且jquerytools滑块要求将位置设置为绝对值，因此包含的div（#header）不会拉伸以适应内容。

我正在尝试使用 jquery 来获取 img 高度的高度并将该高度应用于标题....但是我没有运气。

.CSS：

    #header{
width:100%;
position:relative;
z-index: 20;
/* box-shadow: 0 0 10px white; */
overflow: auto;
}
.scrollable {
position:relative;
overflow:hidden;
width: 100%;
height: 100%;
/* box-shadow: 0 0 20px purple; */
/*  height:198px; */
z-index: 20;
overflow: auto;
}

.scrollable .items {
/* this cannot be too large */
width:1000%;
position:absolute;
clear:both;
/* box-shadow: 0 0 30px green; */
}
.items div {
float:left;
width:10%;
height:100%;
}
/* single scrollable item */
.scrollable img {
    /* float:left; */
    width:100%;
   height: auto;
 /*    height:198px; */
}
/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}

.HTML

    <div id=header><!-- root element for scrollable -->
    <div class="scrollable" id="scrollable">
      <!-- root element for the items -->
      <div class="items">

        <div>
          <img src="img/img2.jpg" />
        </div>

        <div>
           <img src="img/img1.jpg" />
        </div>

        <div>
         <img src="img/img3.jpg" />
        </div>
        <div>
         <img src="img/img4.jpg" />
        </div>
        <div>
         <img src="img/img6.jpg" />
        </div>
    </div><!-- items -->
    </div><!-- scrollable -->
    </div><!-- header -->

Answer 1

像这样：

var height = $('#myImageID').height();
$('#header').height(height);

http://api.jquery.com/height/

Answer 2

我找到了解决方案。Sdespont提供的代码是完美的，它引导我找到答案。他的代码显示高度为零的原因是因为它在图像加载之前寻找图像高度。为了解决这个问题，我改变了

$(document).ready

自

$(window).load

解决。感谢@sdespont