Css 如何在页面上为响应图像保留成比例的垂直空间？

我有一些图像，可以缓慢加载。我想避免页面在加载和占用垂直空间时跳跃

在服务器上，我知道图像的大小，因此我可以通过HTML属性或内联CSS轻松地将

高度

和

宽度

编码到页面中

但如何根据容器的大小在页面上为响应图像保留垂直空间（

最大宽度：100%

）。我不知道它会有多高，直到它装载

假设我的图像是600x300。好的，我可以将它们编码到HTML中，这将为图像保留空间，这样页面就不会跳转。只要水平空间大于600px，这就可以正常工作

但如果我在电话上，水平容器可能是300px，在这种情况下，我的图像将是150px高

我不知道HTML是什么时候生成的。只有当页面加载到浏览器中时，我才能知道这一点。当文档加载时，我需要根据其容器的大小计算加载时图像的大小，并根据该大小设置图像的高度和重量

我可以用JavaScript手动完成这项工作，但我觉得CSS中有一些东西可以做到这一点。我查看了

calc（）

，但不确定如何获得容器的宽度

注意，在生成HTML之前，我将知道图像的比例。因此，我可以在文档中写入一个值，说明从宽度到高度的比率，如果这有帮助的话