Search code examples
angularionic-frameworkionic2ionic3

How to fill image to whole space in ion-img without losing aspect ratio?

My current progress stuck at something like this. I need help

enter image description here

I need the picture in the ion-img to fill its container without losing its aspect. here is my html code

<ion-col class='left-content'>
  <ion-img [src]='voucher.image'></ion-img>
</ion-col>

here is my scss code

ion-img {
  min-width: 5.7em;
  min-height: 5.7em;
  border-radius: 0.5em;
  @include my-img-shadow();
}

.left-content {
  padding-top: 0.8em;
  position: absolute;
  left: 0.5em;
}
Solution

  • Use object-fit:cover.

    ion-img {
    ...
    object-fit:cover;
  }