add change aspect ratio

Signed-off-by: Michel-FK <michel.stempin@funkey-project.com>

docs/tutorials/software/aspect_ratio.md

@@ -1,4 +1,64 @@
+The **FunKey S** provides 2 ways to to allow in-game change of the
+display aspect ratio:
+
+ 1. Using quick shortcuts
+
+ 2. Using the FunKey menu
+
+## Quick shortcuts
+
+ - **Fn** + **DOWN**: Change Aspect Ratio (AR), cycle between:
+
+    - Stretched (default)
+
+    - Cropped
+
+    - Scaled
+
+    - Manual Zoom
+
+ - **Fn** + **LEFT**: Decrease zoom level by 10%
+
+ - **Fn** + **RIGHT**: Increase Zoom level by 10%
+
+## FunKey menu
+
+ - Press the **MENU** key to enter the FunKey menu
+
+ - Press the **UP** or **DOWN** key to select the "**ASPECT RATIO**" setting
+
+ - Use the **LEFT** and **RIGHT** keys to change the aspect ratio
+
+| **Display**                                              | **Aspect Ratio**                                                                                                             |
+|:--------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------|
+| ![Menu Stretched](/assets/images/Menu_Stretched.png)     | Stretched (default): The display is stretched horizontally and vertically to fill the screen in both directions              |
+| ![Menu Cropped](/assets/images/Menu_Cropped.png)         | Cropped (Zoom 100%), The display fills the screen vertically, and is clipped vertically to the left and right of the screen  |
+| ![Menu Scaled](/assets/images/Menu_Scaled.png)           | Scaled (Zoom 0%): The display is scaled down in both directions to be fully visible, both horizontally and vertically        |
+| ![Menu Manual Zoom](/assets/images/Menu_Manual_Zoom.png) | Manual zoom: The display is zoomed in/out manually                                                                           |
+
+ - Press the **MENU** key again to exit from the FunKey menu
+
+## Aspect ratio preview
+
+Here is a short preview of what the different aspect ratios look like:
+
+| **Display**                                | **Aspect Ratio**                                                                                                                   |
+|:------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------|
+| ![Stretched](/assets/images/Stretched.png) | Stretched (default): The display is stretched horizontally and vertically to fill the screen in both directions                    |
+| ![Cropped](/assets/images/Cropped.png)     | Cropped (Zoom 100%): The display fills the screen vertically, and is clipped vertically to the left and right of the screen        |
+| ![Scaled](/assets/images/Scaled.png)       | Scaled (Zoom 0%): The display is scaled down in both directions to be fully visible, both horizontally and vertically              |
+| ![Scaled](/assets/images/Scaled.png)       | Manual zoom 0% (Scaled): The display is scaled down in both directions to be fully visible, both horizontally and vertically       |
+| ![Zoom 10%](/assets/images/Zoom10.png)     | Manual zoom 10%                                                                                                                    |
+| ![Zoom 20%](/assets/images/Zoom20.png)     | Manual zoom 20%                                                                                                                    |
+| ![Zoom 30%](/assets/images/Zoom30.png)     | Manual zoom 30%                                                                                                                    |
+| ![Zoom 40%](/assets/images/Zoom40.png)     | Manual zoom 40%                                                                                                                    |
+| ![Zoom 50%](/assets/images/Zoom50.png)     | Manual zoom 50% (default zoom level)                                                                                               |
+| ![Zoom 60%](/assets/images/Zoom60.png)     | Manual zoom 60%                                                                                                                    |
+| ![Zoom 70%](/assets/images/Zoom70.png)     | Manual zoom 70%                                                                                                                    |
+| ![Zoom 80%](/assets/images/Zoom80.png)     | Manual zoom 80%                                                                                                                    |
+| ![Zoom 90%](/assets/images/Zoom90.png)     | Manual zoom 90%                                                                                                                    |
+| ![Cropped](/assets/images/Cropped.png)     | Manual zoom 100% (Cropped): The display fills the screen vertically, and is clipped vertically to the left and right of the screen |
 
 --8<--
 includes/glossary.md
---8<--
+--8<--