将svg拉伸到整个视口，保持其比例（有溢出）

Question

我有一个svg，长宽比为16：9，我只想通过此svg固定比例填充整个视口。

所以，我想要什么：

1. 如果视口是正方形（或4：3的比例）-我希望我的svg填充高度：100vh，溢出-x：滚动。
2. 如果视口具有例如21：9的比率-我希望我的svg的行为如width：100vw和溢流y：滚动

我希望视口中不会有空白，并且每个视口中的svg会填满整个视口。

我实际上可以在JS上完成此操作，但是如果有任何本机html / css实现-会很好。