私はモバイルWebアプリを構築しており、その上でjquerytoolsスライダーを使用しています。
画像の幅が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>