У меня есть ионная страница с ion-img внутри:
<ion-content>
<ion-grid>
<ion-row class="ion-padding" align-items-center justify-content-center>
<ion-item>
<ion-label text-wrap class="ion-text-center">
Servicio de reportes
</ion-label>
</ion-item>
</ion-row>
<ion-row align-items-center justify-content-center >
<ion-button size="smaill" type="submit" expand="block" routerDirection="forward" (click)="selectSource()" >Capturar imagen</ion-button>
</ion-row>
<ion-row>
<ion-col>
<ion-img [src]="selectedImage" *ngIf="selectedImage"> </ion-img>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Когда для изображения установлено значение selectedImage , оно занимает весь экран и многое другое. Я должен прокрутить, чтобы увидеть полное изображение.
Я хочу, чтобы изображение занимало 20% экрана или фиксированную высоту.
Я пытался сделать это в CSS:
ion-grid {
height: 100%;
ion-row {
max-height: 33.33%;
}
}
А также я попытался сделать со свойством высоты:
<ion-img height: 10rem; [src]="selectedImage" *ngIf="selectedImage"> </ion-img>
И изображение продолжает занимать то же пространство
Как мне это сделать? Спасибо за помощь.