Feature: support images to cover full width

[abhayastudios]

Hey Peter!

First of all, thanks a lot for this very useful plugin!

I was wondering whether it would be possible to support for the images to cover the full width if they are not in the right aspect ratio.

I guess this could be achieved by either clipping some the height, something similar like doing in CSS background-size:cover; background-position:center;. Alternatively, the images could be stretched, more like CSS background-size: 100% 100%;.

What do you think of such a feature?

[PeterStaev]

Hey @abhayastudios ,

I'm not sure I understand you correctly. Currently the images do take the full width of the device. You can see that from the gif in the readme. May be you mean to for the image take the full screen (both height/width)?

[abhayastudios]

The behaviour that I see on both a Samsung Galaxy S8 and the iOS simulator is that images with a landscape aspect ratio will be set to 100% of the height and then for the width the aspect ratio will be honoured, which results in black bars on the left and right side.

This is the template that I am using:

<GridLayout rows="200" columns="*">
  <ImageSwipe row="0" col="0" 
    [items]="photos" imageUrlProperty="imageUrl" [pageNumber]="pageNumber"
    (pageChanged)="pageChanged($event)"  allowZoom="true" backgroundColor="#000000">
  </ImageSwipe>
</GridLayout>

In the example you use the fullscreen in portrait so the constraining dimension is the width which will then be 100% of the image width. I am using a fixed height of 200, which then becomes the constraining dimension.

[PeterStaev]

Hmm, this means that the image proportion is too different than the device screen. The images are always resized to the minimum aspect ratio so that one of the dimensions fully takes the screen. I guess in your case this is the height. which leaves the black bars on the sides.

I'm not sure how your suggestion would work though. The idea of the plugin is that it resizes the images to fit the screen and then the user to be able to zoom in and pan around. If we go with your first option to use a "cover" like behavior, then zooming does not make much sense as no matter how much you zoom you wont be able to pan around. And if we put the image stretched with background-size: 100% 100%; then I'm not even sure how should zooming work like 🤔

[abhayastudios]

For my case I would need a "cover" approach and I don't care if the zoom is disabled. Therefore, if it does not make sense to have both cover and zoom, I could totally live with making these two features mutually exclusive. Does that make sense to you?

[PeterStaev]

Ok, this would work. Marking it as enhancement 😄

[PeterStaev]

Btw, since you do not need pan/zoom, you can safely use nativescript-pager with a template that contains a single image with the correct sizing mode.