如何在离子滚动内缩放图像

我正在使用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样式中即可。 –

如何在离子滚动内缩放图像

回答

相关问题