ブートストラップカルーセルの高さの異なる画像でバウンスが発生する

Question

私はブートストラップ3.3.7vのカルーセルクラスを使用していましたが、これまでのところ がありましたが、問題は1つです。画像は です。カルーセルがあふれています。私はグーグルしていくつかの答えの stackoverflowで、しかし、それらは私の問題を解決しなかった。私は誰も簡単に 問題を説明することを要求します。

<div class="col-md-6" style="padding:0px;">    
<div id="carousel-example-generic" class="carousel slide" data-  
ride="carousel"> 
<!-- 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" role="listbox"> 

<div class="item active"> 
    <img src="images/slider/1.jpg" alt="blue">  
</div> 

<div class="item"> 
    <img src="images/slider/2.jpg" alt="purple">  
</div> 

<div class="item"> 
    <img src="images/slider/3.jpg" alt="red">  
</div> 

<div class="item"> 
    <img src="images/slider/4.jpg" alt="red">  
</div> 

<div class="item"> 
    <img src="images/slider/5.jpg" alt="red">  
</div> 
</div> 

<!-- Controls --> 
<a class="left carousel-control" href="#carousel-example-generic" 
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="#carousel-example-generic" 
role="button" data-slide="next"> 
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 
<span class="sr-only">Next</span> 
</a> 
</div> 
</div> 

Answer 1

カルーセルをカバーする画像のCSSを設定し、カルーセルの最大高さを設定することができます。

img{ 
object-fit:cover; 
object-position:center; 
} 

.item{ 
width:100% 
height:100% 
} 

.carousel{ 
width:100% 
min-height:500px; 
max-height:860px; 
} 

私は、ブートストラップ3についてはよく分からないが、私はBS4があまりにもイメージに合うことができる.IMG流体のクラスを持って知っています。

Answer 2

あなたはスタイルやクラスで高さと幅を修正することができます

<img src='somethng' style="width:50px; height:50px" >