2

このリンクを見て、私がここで間違っていることを教えてください。これは、iPad の横向き (col-md-*) サイズのみで画像サイズがサイド ボックスより短くなります! ご覧のとおり、私はすべてのデバイスにほぼ完璧なサイズを持っていますが、iPad の横向きビューでは!

画像サイズの計算で何か間違ったことをしていますか? 私はそれを修正する必要がありますか？または私のグリッド設定に問題がありますか？

Screnflyで再度テストすると、12 インチおよび 10 インチのメモ帳と iPad の横向きまで、すべてのデバイスで画像がきれいに表示されます。（もちろん、問題はすべての小さなサイズのデバイスに続く可能性がありますが、インフォボックスを非表示にしたため、 ここに画像の説明を入力 ここでは明確ではありません!?これが私が使用しているコードです

<div class="well banbox">
    <div class="row">
      <div class="col-lg-9 col-md-9 col-xs-12 banpic">
      <div id="carousel-example-generic" class="carousel slide">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src=" http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 1
      </div>
    </div>
<div class="item">
      <img src="http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 2
      </div>
    </div>
<div class="item">
      <img src="http://placehold.it/900x398" alt="">
      <div class="carousel-caption">
        slide 3
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>



      </div>
  <div class="col-md-3 hidden-sm hidden-xs baninfo">
          <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst1">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Our Programs</h4>
                    <h6>A Place You Can Trust</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr1"></span>
                </div>
            </div>
        </li>
    </ul>
      <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst2">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Safe Stay Space</h4>
                    <h6>Ministry of Health</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr2"></span>
                </div>
            </div>
        </li>
    </ul>
          <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst3">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">About Us</h4>
                    <h6>A Place You Can Trust</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr3"></span>
                </div>
            </div>
        </li>
    </ul>
      <ul class="list-unstyled">
        <li>
            <div class="well list clearfix" id="lst4">
                <div class="col-md-12  col-lg-9 one">
                     <h4 class="white">Take a Tuor</h4>
                    <h6>Visit Our Daycare online</h6>
                </div>
                <div class="ol-md-2 col-lg-2 two hidden-md"><span class="arrow" id="arr4"></span>
                </div>
            </div>
        </li>
    </ul>

  </div>

     </div>

      </div>
4

3 に答える 3

1

あなたの問題は、画像の特定の比率により、配置されている領域を埋めるのに十分な高さが得られないことです。

あなたの画像比率 = 900/398 = 2.26 カルーセル比率 lg = 848/375 = 2.26 カルーセル比率 md = 698/353 = 1.97

したがって、画像は高さの観点からスペースを埋めるには長方形すぎます。

残念ながら、画像の見栄えを悪くすることなくこれを修正する方法はわかりません。javascript を使用してフィットするように引き伸ばすか、行の高さを指定して を使用してクリップする必要がありますoverflow:hidden。

3 番目のオプションは、画像を col-md に適した高さにすることです。col-lg の人々は、画像が右側のナビゲーションよりも高いことに苦しむことになります。これは私が行く解決策です。

于 2013-10-07T13:32:44.990 に答える