图像覆盖所有图像大小的父级

Question

我有一个Ionic 3应用程序，我在三列中显示三个图像。添加到这些列中的图像可以是任何大小，这是目前导致我的问题。通过CSS我已经拥有了所有高大瘦弱的图像。或＆＃34; square＆＃34;然而，任何＆＃34;短而宽的图像都很好。给我带来了一些麻烦。我希望这些图像能够填充列的整个正方形，但是使用＆＃34;短而宽的＆＃34;他们没有正确填充高度的图像。以下是我的例子：

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

ion-col {
    position: relative;
}

ion-col .card-img-list-item {
    position: relative;
    overflow: hidden;
    padding-top: 100%;
    cursor: pointer;
    border:1px solid #000;
}

ion-col .card-img-list-item img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: block;
    width: 100%;
    max-width: 100%;
    border: 0;
}

<ion-row class="card-img-list row">
  <ion-col class="col">
      <div class="card-img-list-item">
            <img _ngcontent-c0="" src="http://www.slp-photography.com/wp-content/uploads/2017/05/Lake-District-Landscape-Photography-Swirral-Edge-Sunset-Portrait.jpg">
      </div>
  </ion-col>
  <ion-col class="col">
      <div class="card-img-list-item">
            <img _ngcontent-c0="" src="http://www.thinkdunes.com/wp-content/uploads/2016/05/Beach-Cove-1600x500.png">
      </div>
  </ion-col>
  <ion-col class="col">
      <div class="card-img-list-item">
            <img _ngcontent-c0="" src="https://images.on-this.website/4770_16177414785089a40b8a364.jpg">
      </div>
  </ion-col>

</ion-row>

请参阅此处的示例：http://plnkr.co/edit/kAaFNjewMvT43LPddkL8?p=preview

如您所见，中间图像未填充父div的高度。

如果可能的话，我真的不想改变HTML的结构，因为我用来显示图像的库我不能将图像设置为CSS中的背景图像。

我也不想改变其他两个图像的显示方式，所以我希望它看起来像这样：