调整HTML内容的大小以使其适合div,并且还需要保持宽高比

时间:2015-09-29 07:30:11

标签: javascript jquery html css

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

这是我目前的输出

enter image description here

1 个答案:

答案 0 :(得分:2)

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

编辑: 如果您希望将元素放在顶部栏中而不调整其大小,则可以调整元素大小,将文本的font-size缩小或使用padding / margin