在引导程序中裁剪图像

Question

我正在使用bootstrap列。我的图片大小不一。

<div class="row no-gutter">
<div class="col-lg-12" >
  <div class="col-lg-6">
    <img src="imgpath1" class="img-responsive">
  </div>
  <div class="col-lg-3">
    <img src="imgpath2" class="img-responsive">
  </div>
 <div class="col-lg-3">
    <img src="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;
}

现在的样子： 应该如何：

您可以看到（在理想的解决方案中）图像未调整大小，但按中心裁剪。

到目前为止，我尝试了很多东西，但任何解决方案都解决了它。许多解决方案都没有保持响应行为。

Answer 1

将图像从html更改为css，使其成为背景图像。 然后将其设置为background-size：cover; 请注意，这仅适用于IE9及更高版本。