0

Twitterブートストラップの流動的なレイアウトを使用してWebアプリケーションを作成しています。私のコードは以下のようになります。

  <div class="row-fluid">
    <div class="offset1 span10">
        <div class="row-fluid">
            <div class="span4 border-line">
                        <div class="row-fluid">
                            <h4 class="text-center"><a href="/category">name_of_item</a></h4>
                             <a target="_blank" href="link_for_item">
                                <img class="item-size" src="photo.url"/>
                            </a>
                            <p> quick_summary|safe </p>
                        </div>
            </div>
            <div class="span4 border-line">
                        <div class="row-fluid">
                            <h4 class="text-center"><a href="/category">name_of_item</a></h4>
                             <a target="_blank" href="link_for_item">
                                <img class="item-size" src="photo.url"/>
                            </a>
                            <p>quick_summary</p>
                        </div>
            </div>
        </div>
    </div>
</div>

そして私のCSSではアイテムサイズは以下のようになります

 .item-size{
      width: 100%;
      height: 50%;
  }

上記の例では、画像アイテムの高さを除いて、すべてが正常に機能しています。別の値（例：60％）に変更するたびに画像の幅が変化しますが、高さの値はサイズに影響しません。要素を.item-sizeのdivクラスでラップしようとしましたが、それでも効果はありませんでした。画像の高さに影響を与える高さの値を設定する方法を教えてもらえますか？

ありがとう

4

1 に答える 1

4

imgをラップしているタグの高さを設定していない限り、高さをパーセンテージで指定することはできません。したがって、高さをピクセル単位で設定する必要があります。元。：

.item-size{
  width: 100%;
  height: 200px;
}

それでも％を使用する場合は、の高さを設定する必要がありますwrapper div。

于 2013-03-12T23:45:19.040 に答える