html - 在离子柱中居中并填充图像

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 {}

我得到以下结果

当我更换

使用图像，图像穿过列的给定高度，即 300 像素我希望我的产品图像适合列而不是图像 1、2 和 3，而不改变列的尺寸。

标签： htmlcssionic4