How do I control the fill mode of the 2D Player?

Often image viewers will have a series of different fill modes. One is vertical (so it zooms into the image until it fills the viewer’s vertical height.). Another is horizontal (so it zooms the image until it fills the viewer’s horizontal width.). Another is fill (where it will zoom in until both the vertical and horizontal dimensions are filled. Another is fit (where it will ensure you can see the whole image, usually this involves zooming out until you can see the whole image within the context of the viewer.

You can set the fill mode in your “Performance Settings”, under ‘2D Player Image Settings > Image FIll’.

You can also override it when initialising the player, like threekitPlayer({...opts, imageFitMode: 'fitWidth'}) . The options are fitWidth , fitHeight , cover , and contain.

Fit Width should ensure the width fills the area, likewise with Fit Height. Cover ensures there’s no whitespace, and contain ensure the image fits entirely in the area, so nothing is lost.

2 Likes