ダウンスケールレスキューイメージサイズ変更ブートストラップ

Question

ブートストラップでレスポンシブイメージのスケールを縮小する際に、ウェブサイトのカルーセルを使用しています。次のように

<div class="container"> 
     <div class="other-div"> 
     .... 
     </div> 
     <div id="carouselExampleControls" class="carousel slide" data-ride="carousel"> 
      <div class="carousel-inner img-fluid"> 
      <div class="carousel-item active"> 
       <img class="img-fluid" src="/path/1.jpg" alt="First slide"> 
      </div> 
      <div class="carousel-item"> 
       <img class="img-fluid" src="/path/2.jpg" alt="Second slide"> 
      </div> 
      </div> 
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev"> 
      <span class="carousel-control-prev-icon" aria-hidden="true"></span> 
      <span class="sr-only">Previous</span> 
      </a> 
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next"> 
      <span class="carousel-control-next-icon" aria-hidden="true"></span> 
      <span class="sr-only">Next</span> 
      </a> 
     </div> 

</div> 

画像が表示されます：

画像が

画像は、3000x1500 pxの周りのかなり大きい表示されますどのように。私はそれをコンテナの幅とアスペクト比を保持するための適切な高さになるように縮小したいと考えていました。 ex 900/450。

Answer 1

carousel-itemとアニメーション要素のクラス定義は、imgをフレックス要素として扱っていたため、クラス定義を削除しなければならないという問題がありました。私のstyle.cssに以下を追加しました：

.carousel-item{} 

.carousel-item-next, .carousel-item-prev, .carousel-item.active 
{ 
    display:block; 
}