如何在離子滾動內縮放圖像

我正在使用Ionic2應用程序。我想放大離子滾動內的圖像。我怎樣才能做到這一點。如何在離子滾動內縮放圖像

<ion-scroll scrollX="true" scrollY="true" zoom=true> 
     <img src="https://aa.com/app/package_content/s78c_e4vt6/main_images/pg_114.jpg" /> 
    </ion-scroll>

來源

2017-04-04 raju

我想這：https://forum.ionicframework.com/t/zoom-on-image-in-ionic-2/45910會幫助你。讓我知道如果它。 –

我可以通過編寫輕敲事件的小代碼來縮放離子滾動內的圖像。此代碼已經過測試並在android/ios ionic中工作2.點擊一次放大，然後再次點擊縮小。對於ios，只需在離子內容中添加溢出滾動以實現平滑滾動。

.TS頁：

export class PageName { 

constructor() { 
} 
public tap: number = 600; 

tapEvent(e) { 
    if (this.tap != 700) { 
     this.tap = 700; 
    } 
    else 
     this.tap = 600; 
}}

HTML：

<ion-content style="background-image:url(assets/img/image1.PNG); white-space: nowrap; overflow: scroll; overflow-x:scroll; height: 100%"> 
    <ion-scroll scrollX="true" scrollY="true" (tap)="tapEvent($event)" zoom="true" style="width:100%;height:100%;text-align:center;"> 
     <div class="scroll-item" style=" width:100%; white-space: nowrap; overflow: scroll;"> 
      <img [ngStyle]="{'width' : tap + 'px', 'min-width' : tap + 'px'}" alt="logo" src="assets/img/image2.PNG"> 
     </div>  
    </ion-scroll> </ion-content>

來源

2017-07-13 19:36:00

不能使用CSS3縮放而不是'寬度'？ – raju

我正在使用寬度來獲得虛擬縮放效果，方法是將其更改爲600px至700px。您可以將其自定義爲您想要更改該事件的任何屬性，只需將該表達式保留在ng樣式中即可。 –

如何在離子滾動內縮放圖像

回答

相關問題