Hey Roan, sorry to hear your UI buttons are getting squashed when switching to a 16:9 aspect ratio—let’s get this sorted out for you. Based on your setup (Canvas set to "Match Width or Height", reference resolution 2160x1080 with scale 0.5), here are the most targeted fixes to try:

1. Tweak the Canvas Scaler's Match Value #

Your current "Match Width or Height" setting uses a slider to balance between prioritizing width or height for scaling. Since you originally developed for 18:9 (a wider aspect ratio than 16:9), the default middle match might be stretching the UI vertically to fill the screen, which squashes your buttons:

• Open your Canvas Scaler component
• Adjust the Match slider to 0 (fully match width): This scales the UI based on the screen’s width, letting the height adapt naturally without compressing elements vertically.
• Or try setting it to 1 (fully match height) if you want to prioritize vertical space over horizontal—test both to see which fits your win/lose UI layout best.

2. Lock Button Aspect Ratios #

If adjusting the Canvas Scaler alone doesn’t fix it, your buttons might be missing aspect ratio preservation:

• For each squashed button, select its Image component (the button’s background)
• Check the Preserve Aspect checkbox: This ensures the button’s width/height ratio stays consistent regardless of screen scaling.
• Alternatively, in the button’s RectTransform, enable Preserve Aspect (found under the Rect Transform settings dropdown) to lock the ratio at the component level.

3. Use Layout Groups for Consistent UI #

Manual RectTransform settings can break across aspect ratios—layout groups help enforce consistent spacing and sizing:

• Add a Horizontal Layout Group or Vertical Layout Group to the parent object holding your buttons
• Enable Control Child Size (width/height as needed) and uncheck Child Force Expand if you want buttons to keep their fixed size
• Pair this with a Content Size Fitter on the parent if you need the container to adapt to button size, rather than forcing buttons to stretch.

4. Check for Unintended Script Modifications #

Since this is a recent issue (it worked before!), double-check if any scripts were added or modified that adjust button RectTransform values dynamically. Look for code that sets sizeDelta, anchoredPosition, or scale based on screen resolution—these might be overriding your Canvas scaling.

Visual Reference #

Here’s what your squashed buttons look like for context:
Squashed Buttons in 16:9 Aspect Ratio

Give these steps a go, and I’m confident you’ll have your UI looking crisp across both 18:9 and 16:9 resolutions.

内容的提问来源于stack exchange，提问作者Roan Van Der Duim