ブートストラップのフルハイトの列にイメージを合わせるにはどうすればよいですか？

Question

私はこのようなものを達成したいと思います：http://weprob.aw-theme.com/home_one/index.html

この例ではowl-carouselを使用していますが、それは必要ありません。私はちょうど私が持っている3つの完全な高さの列の中に画像を収めたいと思います。

小さな画面で見ると、画像の全高さの寸法を保持したいと思います。

これは私が持っているもの、これまで

<div class="row"> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <img src="assets/images/slide1.jpg" class="img-responsive"> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <img src="assets/images/slide2.jpg" class="img-responsive"> 
    </div> 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
     <img src="assets/images/slide4.jpg" class="img-responsive"> 
    </div> 
</div> 

私のCSSは、私は、水平スクロールバーを見ることができるので、私はoverflow: hiddenを追加

html, body { 
    height: 100%; 
    overflow: hidden; 
} 

かなりシンプルです。

しかし、これはそれが

を出て来るのかであり、これは私が正しく理解している場合、あなたのような何かをしたい私は、ブラウザのサイズを変更すると、それがどのように見えるか

Answer 1

ですこの ？デフォルトでは、彼らはその内のコンテンツの高さを持っているので、下のスニペットやjsfiddle

は最初、私は高さの列を等しく>ここでいじる見て、あなたは異なるサイズでimgsを使用している場合、colsにはなりません高さが等しい。これは単純なJQ

で行われました。img.responsiveにはブートストラップからのデフォルトのCSSがあるので、私はそれを上書きしなければなりませんでした。

また、カラムにはデフォルトのCSSを変更する必要があります。

結論として、このようなものが必要なら、私はあなたがブートストラップを使う必要はないと思う。それはあなたの選択です。多分私はあなたが望むものを正確に理解していなかったでしょう。

var highest = 0; 
 
     $('.col-md-4').each(function(){ 
 
       if($(this).height() > highest){ 
 
       highest = $(this).height(); 
 
     } 
 
    });  
 
    $('.col-md-4').height(highest);

html, body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
} 
 
.img-responsive{ 
 
height:100%; 
 
width:auto; 
 
max-width:none 
 
} 
 
.col-md-4.col-sm-6.col-xs-12 { 
 
width:33.33%; 
 
float:left; 
 
overflow:hidden; 
 
padding:0 
 
}

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <img src="http://beerhold.it/200/200" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <img src="http://beerhold.it/250/250" class="img-responsive"> 
 
    </div> 
 
    <div class="col-md-4 col-sm-6 col-xs-12"> 
 
     <img src="http://beerhold.it/500/500" class="img-responsive"> 
 
    </div> 
 
</div>