0

私はモバイル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>
4

1 に答える 1

2

このjquery関数をチェックアウトしてください：http：//api.jquery.com/height/

于 2012-11-13T20:15:41.500 に答える