有没有办法根据纵横比（纵向\横向）对元素进行不同的样式设置？

Question

请考虑以下布局：

1. 青色矩形具有设定比率。也就是说 - 矩形的宽度是通过设定的比率从其容器的高度得出的。

2. 蓝色矩形高度根据容器的高度设置，其宽度设置为可用视口宽度的其余部分。

3. 可以通过拖动更改青色和蓝色矩形的容器。

4. 通过JS可以轻松实现拖动。所描述的布局可以通过CSS实现。

通过拖动更改视口大小（浏览器宽度）和容器高度的最终结果是蓝色容器可能会将纵横比从纵向更改为横向，反之亦然。

我的问题 -

CSS中是否有一种方法可以根据蓝色容器的宽高比来设置蓝色容器的样式？ （纵向\横向）

我考虑过使用媒体查询，但这些只查询浏览器的维度而不是DOM中任意容器的维度。

另外，我真的不喜欢在JS中检查比率并相应地添加\删除类的想法 - 将表示层逻辑注入到JS中似乎有点不可扩展。