ブートストラップグリッドシステムの塗りつぶしイメージ

Question

2つのネストされた列に分割された列を作成しようとしています。それらは両方とも、それらの尊重された列の全体の高さおよび幅をカバーする画像でなければならない。しかし、何らかの理由で画像が含まれているdivに画像が移動します。

<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9"> 
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5"> 
     <img class="fitimages" src="./images/pic1.jpg"> 
    </div> 
    <div class="col-lg-7 col-md-7 col-sm-7 col-xs-7"> 
     <img class="fitimages" src="./images/pic2.jpg"> 
    </div> 

.fitimages{ 
max-width: 100%; 
max-height: 100%; 

}

彼らは親のdivを囲むなるように、私は、最大幅および最大高さを使用するが、何らかの理由で、左の画像は、全体の幅を満たしていません右のものがそれを上回っている間、

Answer 1

あなたのimgにこのスタイルを与えてください：object-fit: cover;