Question

我在ion-img元素中使用virtualScroll。

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

因此，在ion-img上设置无宽度或高度意味着我得到一个20x20的灰色方块。

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

如何设置此响应？我希望它随屏幕缩放。通过将宽度设置为100％，我可以使用标准img轻松完成此操作。

以下是我的代码：

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

如何使`ion-img`响应？

0 个答案: