UI Builder. Problems with scale images

I'm not sure I get what you want to achieve.

First off, if you want to keep the center image always in the center, you should not be using Position > Position: Absolute. You should instead use the Align options you already are using on your TestImage (just note that they apply to the children of an element, not to the element itself).

You already are using % for the width/height which should maintain the proportion of the inner red image with the proportions of its parent green image. This is if you do want it to stretch.

However, if you want the red image to maintain its own original proportions, regardless of the height/width of its parent green image, then all you can do is set to a fixed width/height. There is no USS property combination to achieve an aspect-ratio lock but still having it grow/shrink.

 

There is a way to get an aspect-ratio, but it's a little couter-intuitive. The padding-top property, when specified as percentage is relative to the parent element's width. Thus, you can set a height of 0, and use a percentage padding-top and width to get a element that will have a constant ratio.

Now controlling the height through padding will be fine if your element only has a background image and no children, since the content will be pushed downward. If you want to add children, you need to add one in between, that will use absolute positioning to stretch with the aspect-ratio-box, then add the children to this element instead.

Here is a demo:

Code (CSharp):

1. <ui:UXML xmlns:ui="UnityEngine.UIElements">
2.     <ui:VisualElement name="container" class="stretch-to-parent-size center-content" style="background-color: rgba(0, 255, 0, 255);">
3.         <ui:VisualElement name="aspect-ratio-element" class="aspect-ratio-element" style="background-color: rgba(255, 0, 0, 255);">
4.             <ui:VisualElement name="aspect-ratio-content" class="stretch-to-parent-size" />
5.         </ui:VisualElement>
6.     </ui:VisualElement>
7. </ui:UXML>
8.  

Code (CSharp):

1. .stretch-to-parent-size {
2.     position: absolute;
3.     left: 0;
4.     top: 0;
5.     right: 0;
6.     bottom: 0;
7. }
8.  
9. .center-content {
10.     align-items: center;
11.     justify-content: center;
12. }
13.  
14. .aspect-ratio-element {
15.     width: 50%;
16.     height: 0;
17.     padding-top: 28.125%;   /* We want a 16:9 box, so padding needs to be: 9/16 * width in percentage */
18. }
19.  

 

Resizing in the canvas currently only really supports pixel resizing, not %. I think for %, it will change the percent number as if it was px, hence the inaccuracies. But even if it had % support, your use case is a bit special and requires use of the Inspector.