カルーセル内に収まるように画像のサイズを自動調整する垂直方向の整列

Question

カルーセルがあり、正しく表示できません。どのようにイメージをカルーセルの下部に配置するのですか？

これは完璧に動作し、何のズームが必要とされていない、私の携帯電話の図である。

をしかし、私はフルスクリーン表示を選択すると、画像がトップに展開：

そしてI 「これで面白いメートル：

これは私のコードです：

HTML：

<div class="container-fluid"> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000"> 
     <!--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> 
     <!--Photos--> 
     <div class="carousel-inner"> 
      <div class="item active"> 
       <img src="../sources/img/carousel/01.jpg"> 
      </div> 
      <div class="item"> 
       <img src="../sources/img/carousel/02.jpg"> 
      </div> 
      <div class="item"> 
       <img src="../sources/img/carousel/03.jpg"> 
      </div> 
      <div class="item"> 
       <img src="../sources/img/carousel/04.jpg"> 
      </div> 
      <!--Carousel 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> 
    </div> 
</div> <!--Container carousel--> 

はCSS：

.carousel-inner > .item { 
    max-height: 700px; 
} 
.carousel-inner > .item img{ 
    width: 100%; 
} 

次のCSSは、問題を修正する必要があります追加

Answer 1

、ありがとうございました。

.carousel-inner > .item { 
    height: 25vh; 
} 

.carousel-inner .item img { 
    position: absolute; 
    margin: auto; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

あなたはメディアクエリを使用して.itemのheightを変更する必要があります。