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 -->
4

2 に答える 2

1

解決策を見つけました。Sdespont から提供されたコードは完璧で、答えを導き出してくれました。彼のコードが高さをゼロと表示していた理由は、画像が読み込まれる前に画像の高さを探していたためです。これを改善するために、私は変更しました

$(document).ready

に

$(window).load

解決しました。@sdespontに感謝

于 2012-11-13T22:20:10.580 に答える
1

このような：

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

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

于 2012-11-13T20:17:36.703 に答える