画布宽度的Div等效：造型前的高度比？

Question

在[width="3"]上指定[height="1"]和<canvas>时，应用于画布的任何样式高度或宽度都会按比例拉伸其他尺寸。

这个功能非常有用，我很好奇<div>的替代方案

我想在Bootstrap列上使用这种比例技术来创建响应行高

canvas {
  background: green;
  height: 100px;
}

div {
  background: red;
  height: 100px;
}

<canvas height="1" width="3"></canvas>
<div height="1" width="3"></div>