toolkit 多个UI元素如何协同放大缩小？

我根据教程做了一个血条UI,一共三个元素HealthBarBackground是血条框，HealthBars是血条，在UI view界面看着没啥问题，game界面就已经乱了，更别说放大缩小了，以是xml文件信息，感谢大佬答疑。
<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
<ui:VisualElement name="HealthBarBackground" style="flex-grow: 0; background-image: url(&quot;project://database/Assets/Art/Ruby/UI/UIHealthFrame.png?fileID=21300000&amp;guid=e04807cd45105ec409b00463fe6ab7b1&amp;type=3#UIHealthFrame&quot;); width: 50%; height: 50%; -unity-background-scale-mode: scale-to-fit;">
<ui:VisualElement name="HealthBarContainer" style="flex-grow: 1;">
<ui:VisualElement name="HealthBar" style="flex-grow: 0; background-image: url(&quot;project://database/Assets/Art/Ducko/UI/UIHealthBar.png?fileID=21300000&amp;guid=39fe000f2b6d9d04b93d6a76310e29aa&amp;type=3#UIHealthBar&quot;); height: 67px; width: 253px; position: relative; top: 66px; left: 229px;" />
</ui:VisualElement>
</ui:VisualElement>
</ui:UXML>