如何獲得圖像的高度並將該高度應用於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 --> 

修訂JQUERY

  <script> 
     $(document).ready(function() { 
     $("img.scrollable").each(function() { 
      $('#header').css("height",$(this).innerHeight()); 
     }); 
     }); 
     </script> 

Answer 1

結帳這個jQuery功能：http://api.jquery.com/height/