Starting the image to fit with aspectFit within the scrollview bound

[darxmac]

If I use this plugin with an image that's portrait (ie height:500, width:100) in a landscape container, it will always be 100% width, but cutting of the lower part of the image.

Is there a way to have aspectFit work like on a regular ImageView ?

[triniwiz]

there is aspectFit, aspectFill, fill also what platform ?

[t3hmrman]

Hey just want to note that one way I partially fixed the issue of cutting off of the lower part of the image at higher zoom rates was by just making sure the ImageZoom component was used inside a GridLayout allowing it to take up the rest of the space, and get as big as possible.

Not sure if this is 100% what @darxmac was talking about but it definitely helped

[Skintillion]

For some reason I can get the aspect to work fine on Android but on iOS its stretching the image.

I can set Width and Height, and make it fit but that only works for that one image. Setting aspectFit doesn't change anything even if I specify Width and Height.

[b02505048]

Same problem here, works well on Android but will stretch on iOS. Any idea?

[Skintillion]

You can use this to kind of make it better but when you zoom the black space won't change so it's not the greatest. Just a temporary workaround.

imageSource = r;
        imageView.src=imageSource;
        if(platformModule.isIOS) {
            var screenWidth = platformModule.screen.mainScreen.widthDIPs;
            var screenHeight = platformModule.screen.mainScreen.heightDIPs;

            var imageRatio = imageSource.width / imageSource.height;
            var boundsRatio = screenWidth / screenHeight;
            
            if(imageRatio > boundsRatio) {
                imageView.width = screenWidth;
                imageView.height = imageSource.height * (screenWidth / imageSource.width);
            } else {
                imageView.width = imageSource.width * (screenHeight / imageSource.height);
                imageView.height = screenWidth;
            }
        }

[b02505048]

Many thanks to @Skintillion!
btw how could I get the imageSource from url?
Am using NativeScript-Vue and tried this but the imageSource.height is undefined

import * as imageSource from "tns-core-modules/image-source";
...
created() {
    console.log('Src width:', imageSource.fromUrl(this.imgUrl).width) // return undefined
}
...

[Skintillion]

httpModule.getImage("IMAGE_URL_HERE")
    .then(function(r) {
        console.log("Image Gotten");
        imageSource = r;
        imageView.src=imageSource;
        if(platformModule.isIOS) {
            var screenWidth = platformModule.screen.mainScreen.widthDIPs;
            var screenHeight = platformModule.screen.mainScreen.heightDIPs;

            var imageRatio = imageSource.width / imageSource.height;
            var boundsRatio = screenWidth / screenHeight;
            
            if(imageRatio > boundsRatio) {
                imageView.width = screenWidth;
                imageView.height = imageSource.height * (screenWidth / imageSource.width);
            } else {
                imageView.width = imageSource.width * (screenHeight / imageSource.height);
                imageView.height = screenWidth;
            }
        }
    }).catch(function(e) {
        console.log("error");
        console.log(e);
        dialogsModule.alert({
            title: "Error",
            message: "Error downloading image.",
            okButtonText: "Sorry"
        });
    });