Preserve Aspect, but with crop center

Question

I have a GameObject with RawImage component displaying an Image using Texture.

The image is squeezed to the size of the object and changing it's original ratio.

How can I tell the image in the texture to CropCenter? (like in Android for example)

Answer 1

Here is how I do with landscape images :

1. Create a parent RawImage element called "Mask" (works with UI > Image component too)
2. Add the UI > Mask component to it
3. Put your Smurf image (with the `RawImage component) as a child of the "Mask" object
4. Set the values of the child'RectTransform :
   • Anchors Min = (0.5, 0),
   • Anchors Max = (0.5, 1)
   • Top = 0
   • Bottom = 0
5. Add the Layout > Aspect Ratio Fitter to the Smurf image and set the Aspect Mode to "Height Controls Width" and the Aspect Ratio to the desired value (16/9 for example)

Check the image : Parent called "Mask" and your smurf image called "Image"

For portrait images, the RectTransform values :

• Anchors Min = (0, 0.5),
• Anchors Max = (1, 0.5)
• Left = 0
• Right = 0

The Aspect Mode of the child must be set to "Width Controls Heigh"