Ion-scroll inside a modal ionic2

Ionic Framework ionic-v3
1

I have a modal and I would like to display a large image in it.

<ion-toolbar class="android-attr">
    <ion-title>
        Title
    </ion-title>
    <ion-buttons start>
        <button (click)="close()">
            <span primary showWhen="ios">Cancel</span>
            <ion-icon name='close' showWhen="android"></ion-icon>
        </button>
    </ion-buttons>
</ion-toolbar>


<ion-content class="has-header">
    <ion-scroll scrollX="true" scrollY="true" zoom="true" >
       <img [src]="imageUrl" />
    </ion-scroll>
</ion-content>

Is there something wrong with the above?

2

So turns out I was not setting the height, went with something closer to the code example in github


<ion-content>
  <ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 100%">
    <div class="map-div"></div>
  </ion-scroll>
</ion-content>

<style>
  .map-div {
    width: 2600px;
    height: 1400px;
    background: url('./map.jpeg') no-repeat;
  }
</style>

and made it dynamic

<ion-scroll class="has-header" scrollX="true" scrollY="true" zoom="true" style="width: 100%; height: 100%">
    <div [ngStyle]="{'background': 'url(' + imageUrl + ')  no-repeat', 'height': height +'px', 'width': width +'px'}"></div>
</ion-scroll>
3

Thank for posting your fix! :+1:

4

Great solution , but unfortunately the pic is zoomed in a lot , is there any soultion to zoom out and in ??