我怎样才能让`ion-img` 响应？

Question

我ion-img在virtualScroll元素内部使用。

图像是高清分辨率，我想将其缩小以适应设备宽度。我以为ion-img用它的 CSS 属性解决了这个问题，但事实并非如此。

所以，不设置宽度或高度ion-img意味着我得到一个 20x20 的灰色方块。

将宽度和高度设置为 1920x1080 意味着我在大多数设备上获得了远离屏幕的巨大图像。

我怎样才能将其设置为响应式？我希望它与屏幕一起缩放。img通过将宽度设置为 100%，我可以使用标准轻松完成此操作。

下面是我的代码：

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