Unity UI Builder：按钮内方形图片保持比例问题求助

方法一：使用CSS样式（优先推荐） #

如果你的方形图片是通过VisualElement的背景纹理实现的，给这个元素添加以下CSS类样式，就能强制保持1:1比例且不拉伸：

.square-bg-element {
    aspect-ratio: 1/1; /* 强制宽高比1:1 */
    background-size: contain; /* 背景图保持比例，完整显示 */
    background-repeat: no-repeat;
    background-position: center; /* 背景图居中 */
    flex-shrink: 0; /* 防止按钮缩小时被挤压变形 */
    max-width: 100%;
    max-height: 100%; /* 限制最大尺寸不超过按钮 */
}

在UI Builder中给目标VisualElement添加这个类名即可。同时确保按钮的布局模式为Flex（默认设置），并将按钮的justify-content和align-items设为Center，让图片居中显示。

如果是用内置的Image元素而非背景纹理，直接在UI Inspector里勾选Image组件的Preserve Aspect选项，就能自动保持图片比例。

方法二：代码动态控制尺寸 #

如果CSS方案无效，可通过代码监听按钮尺寸变化，强制设置图片元素的方形尺寸：

using UnityEngine;
using UnityEngine.UIElements;

public class SquareImageController : MonoBehaviour
{
    [SerializeField] private Button targetButton;
    [SerializeField] private VisualElement squareImageElement;

    void OnEnable()
    {
        if (targetButton != null && squareImageElement != null)
        {
            targetButton.RegisterCallback<GeometryChangedEvent>(OnButtonResized);
            UpdateSquareDimension();
        }
    }

    void OnDisable()
    {
        if (targetButton != null)
        {
            targetButton.UnregisterCallback<GeometryChangedEvent>(OnButtonResized);
        }
    }

    void OnButtonResized(GeometryChangedEvent evt)
    {
        UpdateSquareDimension();
    }

    void UpdateSquareDimension()
    {
        float minEdge = Mathf.Min(targetButton.layout.width, targetButton.layout.height);
        squareImageElement.style.width = minEdge;
        squareImageElement.style.height = minEdge;
    }
}

使用时给脚本赋值目标按钮和图片元素，它会在按钮尺寸变化时自动将图片的宽高设为按钮宽高中的较小值，始终保持方形。

内容的提问来源于stack exchange，提问作者Daweed