离子捏放大图像

Ionic pinch to zoom in image

本文关键字：图像 放大      更新时间：2023-09-26

我只是想在离子视图中放置图像，使其全宽，并允许缩放/缩放缩放事件。看起来很简单，但我能做到!!我是新来的。有人能帮帮我吗?

这就是我想要的，但无法实现我想要的:

<ion-view view-title="MAP"> <ion-content> <ion-scroll zooming="true" direction="xy" delegate-handle="zoom-pane" class="zoom-pane" scrollbar-x="false" scrollbar-y="false"> <img ng-src="img/map.png"> </ion-scroll> </ion-content> </ion-view>

只需在ion-scroll中添加overflow-scroll="false"属性

HTML 

        <ion-scroll id="mapImage"
                zooming="true"
                direction="xy"
                delegate-handle="zoom-pane"
                class="zoom-pane"
                min-zoom="1"
                max-zoom="15"
                overflow-scroll="false">
            <img ng-src="img/map.png">
    </ion-scroll>
CSS 

.zoom-pane {
width: 100% !important;
height: 100% !important;
}
.zoom-pane .scroll {
    min-height: 100% !important;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;    
}
.zoom-pane img {
    width: 100% !important;
    vertical-align: top !important;
}
相关文章：