响应式图像拉伸 - 基于y轴的网格？

在理论上,我正在咬牙切齿,看似非常基本的东西.

想想我们每天使用的常规响应网格,如引导程序,基础等......然后将其旋转90度:

灰色容器是具有已知纵横比(3:2)的放大图像.蓝色容器是已知数量的方形图像(拇指),完全适合大图像.粉色边框是容器,已经收到固定高度(如50vh html,body{height:100vh}).所有图像的一侧为100%,一侧为自动.

所以"灰色"图像应该伸展到它的容器,然后拇指应该跟随.真的,经典的RWD行为 - 就在y轴上.

我试过了:

Flexbox(不是它的调用,在拉伸父容器时对纵横比维护没有帮助)

一个经典的网格,以%计算列的必要宽度(理论上可以解决,但浏览器舍入会导致不规则)

display: table (100%的高度没有踢,并且没有rowpan,试图嵌套它们,可怕)

是的,桌子!(根据它的纵横比无法使主图像伸展,当然,也不可能为小屏幕堆叠拇指)

所以回到开头:是否有可能height: 100%, width: auto用纯HTML/CSS 重现这种风格行为？

如果是的话,走哪条路？

如果不是,为什么,你推荐什么作为JS解决方法？

PS我已经尝试过基础的equalizer脚本了:在计算高度时舍入错误.

PPS:我承认我尝试了zurb foundation 6加载的大部分内容(因为我想在页面的其他部分坚持使用它),所以它可能干扰了一些尝试？