拉伸画布 100% 宽度但包含在窗口中

Question

我有一个画布，我正在使用

width: 100%;

使用 CSS 进行拉伸。保持纵横比效果很好，因为高度会自动调整。但是我希望它在窗口调整得如此之宽以至于画布的高度低于折叠时停止增长。有没有简单的 CSS 属性值？

我认为

object-fit

属性可以做到这一点，但我认为我不理解某些东西。

另请注意，我有 3 个画布层叠在一起，因此解决方案不应混淆它们对“位置：相对”的绝对定位；父容器。