Is there an alternative to container queries to make an element change based on the proportions of its container, using plain CSS?

Question

I need to be able to change the image within a header depending of the proportion of the available space, either to a landscape or portrait version of the logo, without container queries, or considering a progressive enhancement:

Use logo-horizontal.svg when the <header> container has a landscape proportion.

Use logo-vertical.svg when the <header> container has a portrait proportion.

There is not an object-fit answer for this question, it is a logo with two different versions.

Given a CSS grid and its following positions, like so:

 ------------------------
|    1fr - header        |
 ------------------------
|    6em - content       |
 ------------------------
|   48px - CallToAction  |
 ------------------------

and the HTML

<header><img src="images/logo-horizontal.svg" /></header>

<div class="content"><p>Some text</p></div>

<div class="callToAction"><a class="btn">Start here</a></div>