How can I make `ion-img` responsive?

Viewed 1558

I am using ion-img inside a virtualScroll element.

The image is HD resolution and I want to scale it down for device widths. I thought ion-img took care of this with its CSS properties, but it does not.

So, setting no width or height on the ion-img means I get a 20x20 grey square.

Setting a width and height of 1920x1080 means I get a huge image on most devices that goes way off screen.

How can I set this to be responsive? I want it to scale with the screen. I can easily do this with a standard img by setting width to 100%.

Below is my code:

<ion-header>
  <ion-navbar>
    <ion-title>{{ selectedCategory.name }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list [virtualScroll]="selectedCategory.videos" approxItemHeight="300px" approxItemWidth="100%">

    <ion-item class="class" *virtualItem="let item; let i=index" padding>

      <div *ngIf="item.available != true; then locked; else unlocked"></div>

      <ng-template #unlocked>

        <div class="video">
          <ion-img [src]="item.poster_image_s3" (click)="play(item.video_s3)"></ion-img>
        </div> <!-- .video -->

        <p class="title" 
          (click)="play(item.video_s3)"
          [ngStyle]="{'color': '#' + selectedCategory.color_hex_code }">
          <svg-icon src="assets/img/icons/play-button.svg" 
            [ngStyle]="{
              'fill': '#' + selectedCategory.color_hex_code
            }"></svg-icon>
          Watch Demo
        </p>
        <p class="subtitle">{{ item.name }}</p>

      </ng-template> <!-- #unlocked -->

      <ng-template #locked>
        <div class="video">
          <div class="locked">
            <img src="assets/img/icons/studio-locked.svg" alt="Locked" class="icon">  
          </div> <!-- .locked -->
          <ion-img [src]="item.poster_image_s3"></ion-img>
        </div> <!-- .video -->

        <p class="title">
          Subscribe to Watch
        </p>
        <p class="subtitle">{{ item.name }}</p>

      </ng-template> <!-- #locked -->
    </ion-item> <!-- .class -->

  </ion-list>
</ion-content>
0 Answers
Related