How do I create an Image of certain size in the middle of the screen with stretching border images

An illustration of what I need:

I want an image that is the same physical size on all devices in the middle of the canvas (marked "Fixed-size image" in the illustration), with images that scale to fill the rest of the screen.

I thought I had a solution using a Vertical Layout Group with 3 Horizontal Layout Groups inside but since my image has to preserve its aspect (be square) I have "preserve aspect" toggled on in the Image component and it gives the following result when the screen resolution is not equal in width and height (which is the case on almost all devices):

In short: The problem is that the Image component is scaled but the RectTransform is not. I want the adjacent image margins to fill that black space.