Захоплення зображень у завантажувальному файлі - 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 так що це фонове зображення. Потім встановіть його на фоновому розмірі: обкладинка; Зауважте, що це працює тільки в IE9 та пізніших версіях.