ブートストラップで画像を切り取る - html、css、twitter-bootstrap

ブートストラップカラムを使用しています。画像のサイズが異なります。

<div class="row no-gutter">
<div class="col-lg-12" >
<div class="col-lg-6">
<img src="/images/imgpath1" class="img-responsive">
</div>
<div class="col-lg-3">
<img src="/images/imgpath2" class="img-responsive">
</div>
<div class="col-lg-3">
<img src="/images/imgpath3" class="img-responsive">
</div>
</div>


</div>

CSS：

.row.no-gutter {
margin-left: 0;
margin-right: 0;
}

.row.no-gutter [class*="col-"]:not(:first-child),
.row.no-gutter [class*="col-"]:not(:last-child) {
padding-right: 0;
padding-left: 0;
}

今それがどのように見えるか： それがどうあるべきか：

（理想的なソリューションでは）画像のサイズは変更されず、中央で切り取られていることがわかります。

私はこれまで多くのことを試してきましたが、どのソリューションでも解決しました。多くのソリューションは応答性のある動作を維持しませんでした。

回答：

画像をhtmlからcssに変更して、背景画像にします。 次に、background-size：coverに設定します。 これはIE9以降でのみ機能することに注意してください。