在离子列中居中并填充图像

Question

我将使用以下HTML将产品图像添加到Ionic网格中的IONIC Web应用程序中 我设法使

文本在列中居中，但是当添加图像代替

文本时，网格列的高度会发生变化，并且图像也无法正确放置。

<ion-header>
   <ion-toolbar>
      <ion-title>  
         Grid Example  
      </ion-title>
   </ion-toolbar>
</ion-header>
<ion-content class="padding" color="light">
   <ion-grid >
      <ion-row class="parent-row">
         <ion-col size="7" class="col1">
            <p class="center-image">Image1</p>
         </ion-col>
         <ion-col class="col2">
            <ion-row class="image2">
               <p class="center-image">Image2</p>
            </ion-row>
            <ion-row class="image3">
               <p class="center-image">Image3</p>
            </ion-row>
         </ion-col>
      </ion-row >
   </ion-grid>
</ion-content>

以及后续的CSS。

.parent-row {
    height: 300px;
}

.col1 {
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.col1 img {
    flex-shrink: 0;
    max-width: 100%;
    min-height: 100%;
}

.col2 {
    background-color: orange;
}

.image2 {
    background-color: yellow;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.image2 img {
    flex-shrink: 0;
    min-width: auto;
    min-height: auto;
}

.image3 {
    background-color: green;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
}

.image3 img {
    flex-shrink: 0;
    min-width: 100%;
    min-height: auto;
}

.center-image {}

我得到以下结果

当我用图片替换

时，图片会越过列的给定高度，即300px 我希望我的产品图像可以代替图像1，2和3放入列中，而无需更改列的尺寸。