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

Question

我的应用程序中有一个顶部栏，我们正在服务器端为顶部栏创建 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>

这是我目前的输出

Answer 1

你可以做的是在整个顶部栏 div 上放置一个 width:100%;，然后在 javascript 中根据元素的宽度调整它的大小，或者你可以使用新的 CSS3 功能: vw 和 vh。因此，您可以将整个条形图设置为 height:8vw;，它会随着您的宽度按比例缩放。

编辑:如果您想将元素放在顶部栏而不调整它的大小，您可以调整元素的大小，将文本的 font-size 变小或使用 padding/ margin 。