モバイル画面で画像を調整する方法

Question

さまざまな種類の画面でSlider画像を調整するにはどうすればよいですか？私はブートストラップを使用しています。

1. サイズの画像を使用している場合はスライダー：1920px * 1228px;それはノートパソコンの画面の完全な高さを使用していますが、モバイル画面で見ると約モバイル画面の30％（モバイルの幅は高さよりも比較的小さいため）。
2. 一方、サイズ1600 * 400pxのイメージを使用しようとしている場合は、ノートパソコンの画面では、高さの約30％を取っています&私のサイトごとに良い見ているが、これで、私は携帯電話の画面では非常に小さくて悪い見ている。

CSSを追加する必要がありますか？

ここに私のコードです。

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> 
    </ol> 

    <!-- Wrapper for slides --> 
    <div class="carousel-inner"> 
     <div class="item active"> 
     <img src="images/Cimg5.jpg" alt="Los Angeles" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="images/Cimg2.jpg" alt="Chicago" style="width:100%;"> 
     </div> 

     <div class="item"> 
     <img src="images/Cimg3.jpg" alt="New york" style="width:100%;"> 
     </div> 

    <div class="item"> 
     <img src="images/Cimg4.jpg" alt="New york" style="width:100%;"> 
     </div> 

    </div> 

    <!-- Left and right controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
     <span class="glyphicon glyphicon-chevron-left"></span> 
     <span class="sr-only">Previous</span> 
    </a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
     <span class="glyphicon glyphicon-chevron-right"></span> 
     <span class="sr-only">Next</span> 
    </a> 

</div> 

Answer 1

頭の中で使用viewportその後、確認してください。

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">