さまざまなデバイスサイズでブートストラップのカルーセルに異なるサイズのイメージを使用する

Question

したがって、私の問題を解決する最良の方法がわかりません。私は、navbarの下に座って1：3の比率の画像サイズのデスクトップで素晴らしいように見える大きいエッジツーエッジのカルーセルでWebページを作っています。モバイルでは、画面が小さくて薄く見えるので、私は回転台の小さな画面に表示したい2：3のサイズの新しい画像を作成しました。

どうすればいいですか？さまざまなサイズの画像を変更するJavascript？モバイル用とデスクトップ用の異なるポートサイズのカルーセルの非表示の列私は、この問題を解決するための最も理にかなった方法/ベストプラクティスを知る必要があります。

基準点のための私のカルーセルHTML：

<div id="myCarousel" class="carousel slide" data-ride="carousel"> 

    <!-- Indicators --> 
    <ol class="carousel-indicators"> 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
    <li data-target="#myCarousel" data-slide-to="1"></li> 
    <li data-target="#myCarousel" data-slide-to="2"></li> 
    <!--<li data-target="#myCarousel" data-slide-to="3"></li> optional --> 
    </ol> 

    <div class="carousel-inner" role="listbox"> 
    <div class="item active"> 
     <img class="first-slide" src="img/carousel/carousel1.jpg" alt="First slide"> 
    </div> 
    <div class="item"> 
     <img class="second-slide" src="img/carousel/carousel2.jpg" alt="Second slide"> 
    </div> 
    <div class="item"> 
     <img class="third-slide" src="img/carousel/carousel3.jpg" alt="Third slide"> 
    </div> 
    </div> 

    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"> 
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 
    <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"> 
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
    <span class="sr-only">Next</span> 
    </a> 

</div> 

Answer 1

ここ@MediaQueriesを使用して可能な解決策です。

HTMLに2つの異なるカルーセルを作成し、メディアクエリを使用して表示するものを定義します。それぞれのカルーセルごとにCSSを個別にカスタマイズして、サイジングが正しくなるようにすることができます。

Bootply Example - ウィンドウの幅を1000px以下に変更して更新します。あなたがこれを行うにはCSSメディアクエリを使用したいとしている

HTML

<div class="container"> 
    <div class="span8"> 
    <div id="myCarousel" class="carousel slide wide"> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarousel" data-slide-to="0" class=""></li> 
     <li data-target="#myCarousel" data-slide-to="1" class="active"></li> 
     <li data-target="#myCarousel" data-slide-to="2" class=""></li> 
     </ol> 
     <div class="carousel-inner"> 
     <div class="item"> 
      <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt=""> 
      <div class="carousel-caption"> 
      <h4>First Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      </div> 
     </div> 
     <div class="item active"> 
      <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt=""> 
      <div class="carousel-caption"> 
      <h4>Second Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://ecowatch.com/wp-content/uploads/2015/01/Tiger.jpg" alt=""> 
      <div class="carousel-caption"> 
      <h4>Third Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      </div> 
     </div> 
     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev">‹</a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next">›</a> 
    </div> 
    <div id="myCarouselNarrow" class="carousel slide narrow"> 
     <ol class="carousel-indicators"> 
     <li data-target="#myCarouselNarrow" data-slide-to="0" class=""></li> 
     <li data-target="#myCarouselNarrow" data-slide-to="1" class="active"></li> 
     <li data-target="#myCarouselNarrow" data-slide-to="2" class=""></li> 
     </ol> 
     <div class="carousel-inner"> 
     <div class="item"> 
      <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt=""> 
      <div class="carousel-caption"> 
      <h4>First Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      </div> 
     </div> 
     <div class="item active"> 
      <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt=""> 
      <div class="carousel-caption"> 
      <h4>Second Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      </div> 
     </div> 
     <div class="item"> 
      <img src="http://img1.rnkr-static.com/list_img_v2/5795/1825795/C480/best-of-awwducational-fun-facts-about-adorable-animals-u1.jpg" alt=""> 
      <div class="carousel-caption"> 
      <h4>Third Thumbnail label</h4> 
      <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> 
      </div> 
     </div> 
     </div> 
     <a class="left carousel-control" href="#myCarouselNarrow" data-slide="prev">‹</a> 
     <a class="right carousel-control" href="#myCarouselNarrow" data-slide="next">›</a> 
    </div> 
    </div> 
</div> 

CSS

.wide { 
    width: 600px; 
} 

.narrow { 
    width: 480px; 
    display: none; 
} 

@media (max-width: 1200px) { 
    .wide { 
    display: none; 
    } 
    .narrow { 
    display: block; 
    } 
}