CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Manish kumar
Manish kumar

Reputation: 11

Resize HTML content to get it fit in div and also need to maintain the aspect ration

I am having a top bar in my application and we are creating the HTML content for top bar at server side so the HTML content i need to resize according to available space we have in top bar. below is my sample 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>

This is the output I am currently having

enter image description here

Upvotes: 0

Views: 39

Answers (1)

Axel Lavielle
Axel Lavielle

Reputation: 252

What you can do is put a width:100%; on the whole top bar div, and then in javascript resize it with the width of the element OR you can use the new CSS3 functionalities: vw and vh. So you can put you whole bar to height:8vw; and it will scale with your width as a ratio would do.

EDIT: If you want to put the element in your topbar without resizing it, you can resize the element, putting the font-size of your text smaller or using padding/margin.

Upvotes: 2

Related Questions