Javascript 调整HTML内容的大小，以使其适合div，并且还需要保持纵横比

我的应用程序中有一个顶栏，我们正在服务器端为顶栏创建HTML内容，因此我需要根据顶栏中的可用空间调整HTML内容的大小。下面是我的HTML示例

<p><strong><span style="color: #B8312F; font-size: 16px;">This is Title</span></strong></p>
<p><strong><span style="font-size: 9px;">123</span></strong></p>

这是标题

123

这是我目前的输出

---

您可以做的是放置一个

宽度：100%

在整个顶部条div上，然后在javascript中根据元素的宽度调整其大小，或者您可以使用新的CSS3功能：vw和vh。所以你可以把你的整个酒吧

高度：8vw并且它将按比例随宽度缩放

编辑：
如果您想将元素放入顶栏而不调整其大小，可以调整元素大小，将文本的
字体大小
变小，或者使用
填充
/
边距
实际上我不应该调整顶栏div的大小，我需要调整HTML的大小以适应顶栏。好的，很抱歉我的理解错误。您可以创建一个div，其中包含标题和123。并将其调整到您的顶部栏高度感谢您的理解，但我仍然不清楚如何调整包含htmlI的div的大小。我尝试使用边距/填充，但没有成功。字体大小可以使用，但我需要知道如何使整个html看起来仍然与屏幕截图中显示的相似（第一行的字体大小较大，第二行的字体大小较小）123不起作用？